canvas多张图片合成分享海报，图片不完整解决

最近接触到了生成分享海报需求，有多张动态图片合成一个分享海报，由于是h5需要加载静态资源，很多时候生成的海报图片都不完整，img.onerror又不报错，发现如果是img.onload完成之后，canvas就可以写进去，但是img.οnlοad=function(){ (这里面无法再写img.onload,写了也不生效) }，找到一个方法，借此记录一下

    let c = document.getElementById('myCanvas') // 画板idlet p = document.getElementById('poster')//尺寸c.width = 900;c.height = 1755;let ctx = c.getContext("2d")let img = new Image() // 背景图对象var base64 = "" //base64//引入线上背景图可能存在跨域问题,解决：img.setAttribute("crossOrigin", "anonymous")img.src = "" // 背景图路经//爱国图标let img1 = new Image()img1.setAttribute("crossOrigin", "anonymous")img1.src = ""let posterImges = [{ "img": img, "position": [0, 0, 900, 1755] },{ "img": img3, "position": [503, 165, 240, 230] },{ "img": img1, "position": [503, 250, 162, 145] },{ "img": img2, "position": [687, 140, 73, 60] },{ "img": img4, "position": [650, 1450, 120, 120] },{ "img": img7, "position": [35, 440, 840, 800] },{ "img": img9, "position": [560, 580, 179, 147] },{ "img": img6, "position": [204, 1440, namelen + 4, 40] },{ "img": img5, "position": [270, 1345, 30, 30] },{ "img": img10, "position": [96, 1020, 708, 187] },]
for (var i = 0; i <= posterImges.length - 1; i++) {let imaa = posterImges[i]["img"]let pos = posterImges[i]["position"]imaa.onload = function () {num = num + 1if (num == posterImges.length) {console.log("执行");for (var t = 0; t <= posterImges.length - 1; t++) {let imaa1 = posterImges[t]["img"]let pos1 = posterImges[t]["position"]ctx.drawImage(imaa1, pos1[0], pos1[1], pos1[2], pos1[3])}base64 = c.toDataURL("image/png");_this.posterImg = base64;}}}

核心思想就是把img对象和canvas的需要写的对应坐标放在一个数组里面，然后遍历，onload完了一个就写一个，最后判断onload完了所有的图片，再执行toDataURL方法就可以了，这样可以保证生成的图片是完成的，不会漏写，如果考虑到速度问题，还可以使用离屏canvas，就是使用document.createElement()创建一个canvas，使用这个canvas去执行drawImage，canvas写完之后再通过canvas.drawImage(offcanvas,0,0)的api把离屏canvas写到另一个canvas上然后由另一个canvas去toDataURL。

canvas多张图片合成分享海报，图片不完整解决相关推荐

html5多图合成gif,gif动态图片制作多张图片合成gif动态图片
单一的静态图片太枯燥,GIF动态图片看起来才有意思有木有!网上各种经典爆笑GIF图片或者闪图,大多数的友友们只会看→复制→外发,难道就没有朋友想要自己制作GIF动态图片吗?如何制作gif动态图片?狸窝 ...
java多张图片合成一张_OLIS 多张图片合成分享
OLIS(Create Long Image Synthesis) 最近公司需求处理多张图片合成并且加底部合成实现原理读取本地绝对路径图片-> 转换成bitmap -> 然后绘制到 ...
仿商城商品生成分享海报图片和识别图中二维码并跳转商品详情页
购物商城里面的商品分享给朋友的时候会生成一张海报图片,图片上附带这二维码图片,朋友拿到这张图片扫描上面的二维码就可以进入商品详情页查看此商品了.今天来做一下这种功能,先生成商品海报图片,然后长按这张图 ...
asp生成带参数的二维码并合成推广海报图片，asp合并合成推广海报图片asp代码
最近做的一个项目中,客户要求用asp生成二维码,然后合并到一张背景图片上,合并生成一张推广海报来,可把我愁坏了,经过一个晚上的努力,成功了,下面把这个:asp生成带参数的二维码并合成推广海报,asp合 ...
JAVA生成微信小程序分享海报图片
由于小程序里面分享产品,不能直接到朋友圈,因此很多系统的做法是生成一张带有二维码,或者小程序码的海报图片.用户保存到本地,然后分享到朋友圈. 生成海报,有两种方式: 前端小程通过 canvs 绘图到模 ...
小程序生成分享海报图片并保存相册
文章目录前言一.普通二维码生成二.生成海报图片并保存 1.引入依赖组件 2.生成海报图片 2.1 配置painter海报json 2.2 引入数据构造函数并在适当时间触发生成海报 2.3 弹窗组 ...
asp生成带参数的二维码并合成推广海报图片，asp合并合成推广海报图片asp代码...
最近做的一个项目中,客户要求用asp生成二维码,然后合并到一张背景图片上,合并生成一张推广海报来,可把我愁坏了,经过一个晚上的努力,成功了,下面把这个:asp生成带参数的二维码并合成推广海报,asp合 ...
小程序绘制海报的那些问题——记录一次uniapp小程序生成分享海报的问题及解决
最近做了一个需求,一个推广活动,在小程序中生成推广海报并且支持保存在手机相册,UI稿中呈现的是一个非全屏的固定宽高的海报图片,在保存的时候遇到了如下问题并一一解决 [问题1]开发者工具中可以正常绘制海 ...
ios ipad里面调用系统相册图片不完整解决方法
项目里面用到了系统相册,在手机里面取出来是完整的,但是在pad里面取出来就是不完整,只是取到左上角的一部分,开始查资料,最后的解决办法是,在调UIImagePickerController这个类时将这 ...

canvas多张图片合成分享海报，图片不完整解决

canvas多张图片合成分享海报，图片不完整解决相关推荐

最新文章

热门文章