问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么canvas.toDataURL获取图片是空白。

头像
一米阳光
    4521117
    头像
    Dont
      7k153552
       var type = 'png';
 var canvas = document.createElement('canvas');
 var imgData = canvas.toDataURL(type);
var _fixType = function(type) {
       type = type.toLowerCase().replace(/jpg/i, 'jpeg');
       var r = type.match(/png|jpeg|bmp|gif/)[0];
       return 'image/' + r;
};

imgData = imgData.replace(_fixType(type), 'image/octet-stream');
 var saveFile = function(data, filename) {
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
         save_link.dispatchEvent(event);
};
var filename = 'weiyin_' + (new Date()).getTime() + '.' + type;
saveFile(imgData, filename);

      为什么我最后下载出来的png是空白的呢

      javascript
      阅读 21k
      3 个回答
      得票最新
      头像
      不爱吃西红柿的鱼
        8.2k21124
        ✓ 已被采纳

        你把

        var imgData = canvas.toDataURL(type);

        这句放在获取_fixType后面，并传一个_fixType进去再试试

        var fixType = _fixType(type);
var imgData = canvas.toDataURL(fixType);
imgData = imgData.replace(fixType, 'image/octet-stream');

        var canvas = document.createElement('canvas');

        这句代码的意思，新创建一个空白canvas元素，所以后面获取到的base64图片也应该是空白的。所以最后就获取了空白了的图片

        头像
        一米阳光
          4521117

          其实这个问题出现在var canvas = document.createElement('canvas');这句上面，获取是为空，所以换了 var canvas = document.getElementById('canvas')就可以了

          头像
          小白菜
            712

            完整demo:请输入代码

            <!DOCTYPE html>
<html><body>
<h2>Input Div:</h2>
<div id="div">
    <p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>TRY</span></p><p><b>By Dion</b></p>
</div>
<h2>Output Image:</h2>
<script>
    //1.将div转成svg  
    var divContent = document.getElementById("div").innerHTML;
    var data = "data:image/svg+xml," +
            "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
            "<foreignObject width='100%' height='100%'>" +
            "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
            divContent +
            "</div>" +
            "</foreignObject>" +
            "</svg>";
    var img = new Image();
    img.src = data;
    document.getElementsByTagName('body')[0].appendChild(img);


    //2.svg转成canvas  
    var canvas = document.createElement('canvas');  //准备空画布  
    canvas.width = img.width;
    canvas.height = img.height;

    var context = canvas.getContext('2d');  //取得画布的2d绘图上下文  
    context.drawImage(img, 0, 0);


    //var a = document.createElement('a');  
    //a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据  
    //a.download = "MapByMathArtSys";  //设定下载名称  
    //a.click(); //点击触发下载  


    //3. 图片导出为 png 格式  
    var type = 'png';
    var imgData = canvas.toDataURL(type);

    /**
     * 获取mimeType
     * @param  {String} type the old mime-type
     * @return the new mime-type
     */

    var _fixType = function (type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };

    // 加工image data，替换mime type  
    imgData = imgData.replace(_fixType(type), 'image/octet-stream');
    console.log(imgData);


    /**
     * 在本地进行文件保存
     * @param  {String} data     要保存到本地的图片数据
     * @param  {String} filename 文件名
     */
    var saveFile = function (data, filename) {
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };

//
//    // 下载后的图片名
    var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
    // download
    saveFile(imgData, filename);
//    console.log(filename);


</script>
</body></html>

            亲测上面demo在手机端图片是下载不下来的，保存到手机预览也是有问题的，只在pc端有效。
            如果要兼容移动端建议你可以用html2canvas.js
            将div里的内容转为canvas,再将canvas转为img非常方便。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题