js两张图片合成一张图片，使用canvas方法

最新推荐文章于 2025-05-12 13:45:47 发布

原创

最新推荐文章于 2025-05-12 13:45:47 发布 · 762 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #合成图片 #vue.js #前端

注：图片是本地的图片，因为我用接口返回的图片地址的图片会有跨域问题，只好把要合成的图片放assets里
new URL(
../../../../assets/images/xxx.png,
import.meta.url
).href;是拿到本地的图片，因为vite不能用import语法，只能使用这个语法 new URL(
../../../../assets/images/xxx,
import.meta.url ).href;
canvas.toDataURL();是将画布转为base64图片

//两张图片融合合成图片
 let canvas = document.createElement('canvas');
        // 设置画布宽高
        canvas.width = 600;
        canvas.height = 379;
        // canvas.width=this.divPosition.width
        // canvas.height=this.divPosition.height
        let ctx = canvas.getContext('2d');
        // 然后加载第一张图片到Canvas中：
        let img1 = new Image();
        img1.src =