0

我获取了多张图片地址用于canvas绘制,可图片宽高都不统一,于是我获取了每个图片的宽高并赋值到canvas里,结果就导致,canvas因为宽高改变而导致图片显示不出来。

代码:

<img src='/images/1.jpg' />
<img src='/images/2.jpg' />
<img src='/images/n个图片.jpg' />
var img = [];
for(var i = 0; i < $('.pic').length; i++){
    img.push($('.pic').eq(i).attr('src'));
    canvasit(i,img);
    //为了方便使用,我把合成放在函数中进行...
}
//开始绘制
function canvasit(i,img){
    var pic = new Image();
    var code = new Image();
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    pic.src = img[i];
    var width = pic.width;
    var height = pic.height;
    canvas.width = width;
    canvas.height = height;
    pic.onload = function(){
        ctx.drawImage(pic,0,0);
        code.src = '另一张需要合成的图片地址';
        code.onload = function(){
            ctx.drawImage(code,0,0);
            var imgs = document.createElement('img');
            imgs.src = canvas.toDataURL("image/png");
            document.body.appendChild(imgs);
        }
    }
}

本地测试没问题,但是到了服务器就出错了,图片直接显示不出来。

xiaozy 54
11月8日提问
1 个回答
0

没有调试出来,我觉得很奇怪,按说不是要把所有的img对象当作参数一次传入到函数里面吗?先遍历一下取出所有的尺寸,然后拿到最大的尺寸设置canvas的大小啊

撰写答案

推广链接