首页 > 其他分享> 文章详细

简单记录 html2canvas网页中的图片无法显示的问题

2020-04-02 14:09:28 阅读：578 来源： 互联网

标签：src 网页 img 记录 image html2canvas var 绘制图片

html2canvas绘制图片，如果页面中存在img，出现绘制的结果无图片时，原因如下：（建议逐步查找）

1.绘制时间过早，图片尚未加载

解决方式：通过setTimeout延迟绘制或者通过img.onload监听图片是否绘制完成

2.绘制的图片跨域问题

解决方式：图片生成前，添加 image.crossOrigin = "*";

切记：要在图片赋值之前添加

3.如果出现安卓或者pc端正常显示，ios端无法显示的问题

解决方式：处理图片跨域时，防止的位置不正确，正确方式如下

 var image = new Image();
    image.crossOrigin = "*";  // 必须在image之前赋值
    image.src = src + '?v=' + Math.random(); // 处理缓存

4.页面的部分img，绘制后在ios上无显示（亲测多为jpeg图片）

解决方式：将图片转化为base64格式即可。

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png");  // 可选其他值 image/jpeg
    return dataURL;
}

function init(src, type) {
    var image = new Image();
    image.crossOrigin = "*";  // 必须在image之前赋值
    image.src = src + '?v=' + Math.random(); // 处理缓存
    image.onload = function(){
        var base64 = getBase64Image(image);
        if (type == 1){   // 区分是第几个图片
            $('#img1').attr('src',base64);
        } else if (type==2) {
            $('#img2').attr('src',base64);
            // 开始绘制
            setTimeout(function () {
                app.draw()
            },1000)
        }
        return base64
    }
}

5.字符串过长使用css隐藏，有特殊字符不显示,如：

text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

使用上述css，隐藏字符串会出现绘制的图片只有占位不显示的问题

现解决方案对字符进行裁剪（5位为最佳）

function cutStr(str,L){
    var result = '',
        strlen = str.length, // 字符串长度
        chrlen = str.replace(/[^\x00-\xff]/g,'**').length; // 字节长度
    if(chrlen<=L){return str;}
    for(var i=0,j=0;i<strlen;i++){
        var chr = str.charAt(i);
        if(/[\x00-\xff]/.test(chr)){
            j++; // ascii码为0-255，一个字符就是一个字节的长度
        }else{
            j+=2; // ascii码为0-255以外，一个字符就是两个字节的长度
        }
        if(j<=L){ // 当加上当前字符以后，如果总字节长度小于等于L，则将当前字符真实的+在result后
            result += chr;
        }else{ // 反之则说明result已经是不拆分字符的情况下最接近L的值了，直接返回
            return result;
        }
    }
}

6.文字重叠

1.设置文字居中，文字自动换行后文字有重叠 text-align: center;

解决办法： text-align: left; text-align: justify;等

2.使用了“ /” 分开语句。“/”可能与后面的字重叠

解决办法：使用全角来编写“/”试试

标签：src,网页,img,记录,image,html2canvas,var,绘制,图片
来源： https://blog.csdn.net/L95_0719/article/details/101311806

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简单记录 html2canvas网页中的图片无法显示的问题