Community Learn Tools Library Leisure
search
English
javascript - 为什么canvas.toDataURL获取图片是空白。
巴扎黑
巴扎黑 2017-04-11 08:58:47
0
3
1951
 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是空白的呢

巴扎黑
巴扎黑

reply all(3)
刘奇
刘奇2017-04-11 09:00:47 3 floor

你把

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图片也应该是空白的。所以最后就获取了空白了的图片

Like +0
Add Reply
刘奇
刘奇2017-04-11 09:00:47 2 floor

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

Like +0
Add Reply
Ty80
Ty802017-04-11 09:00:47 1 floor

完整demo:请输入代码

<!DOCTYPE html>
<html><body>
<h2>Input p:</h2>
<p id="p">
    <p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>TRY</span></p><p><b>By Dion</b></p>
</p>
<h2>Output Image:</h2>
<script>
    //1.将p转成svg  
    var pContent = document.getElementById("p").innerHTML;
    var data = "data:image/svg+xml," +
            "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
            "<foreignObject width='100%' height='100%'>" +
            "<p xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
            pContent +
            "</p>" +
            "</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
将p里的内容转为canvas,再将canvas转为img非常方便。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template