将base64格式的图片画到canvas上(js和vue两种)

简介: 将base64格式的图片画到canvas上(js和vue两种)

前言:

使用时将里面的base数据替换即可,画布大小进行修改

vue使用时必须在mounted里面、或者点击触发,因为在这个生命周期后才能获取dom元素


js:

// 在 JavaScript 中将 base64 格式的图片画到 canvas 上可以按照以下步骤进行操作:
// 创建一个 Image 对象
var img = new Image();
// 指定 base64 格式的图片作为 Image 对象的 src
img.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA...';
// 等待图片加载完成
img.onload = function() {
  // 获取 Canvas 元素
  var canvas = document.getElementById('myCanvas');
  // 获取 2D 绘图上下文
  var ctx = canvas.getContext('2d');
  // 将图片绘制到 Canvas 上
  ctx.drawImage(img, 0, 0);
}


vue:

<template>
  <canvas ref="myCanvas"></canvas>
</template>
<script>
export default {
  mounted() {
    // 创建一个 Image 对象
    var img = new Image();
    // 指定 base64 格式的图片作为 Image 对象的 src
    img.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA...';
    // 等待图片加载完成
    img.onload = () => {
      // 获取 Canvas 元素
      var canvas = this.$refs.myCanvas;
      // 获取 2D 绘图上下文
      var ctx = canvas.getContext('2d');
      // 将图片绘制到 Canvas 上
      ctx.drawImage(img, 0, 0);
    }
  }
}
</script>


总结:

在这两种示例中,都是通过创建一个新的 Image 对象,并将 base64 格式的图片赋值给它的 src 属性。接着使用 onload 事件确保图片加载完成后,获取 Canvas 元素和 2D 绘图上下文,最后调用 drawImage 方法将图片绘制到 Canvas 上。


base64 格式的图片实际上是将图片以文本的形式编码成一长串字符,通过 data URI scheme 的方式嵌入到页面中。因此,当指定这样的字符串作为 Image 对象的 src 时,浏览器会自动解析并将其渲染为图片。然后通过 Canvas 的 2D 绘图上下文的 drawImage 方法,将图片绘制到 Canvas 上。

相关文章
|
9天前
|
移动开发 前端开发 JavaScript
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜
22 6
|
1月前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
18 0
|
10天前
|
前端开发 JavaScript
|
18天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
35 7
|
19天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
19天前
|
前端开发 JavaScript PHP
解决在页面中无法获取qrcode.js生成的base64的图片
该文档介绍了如何解决在部分安卓手机上无法正确加载二维码图片的问题。之前的方法是使用qrcode.js生成二维码,然后与背景图结合用canvas绘制海报,但在某些安卓设备上遇到onload事件不触发的问题。
25 2
|
30天前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
1月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
78 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
1月前
|
JavaScript 前端开发 开发者
Vue路由及Node.js环境搭建
Vue.js 和 Node.js 是两个不同的技术,分别用于前端和后端开发,具有不同的用途和功能
9 1
|
1月前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
89 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)