输出HTML5画布作为图像，howto？ [英] outputting HTML5 canvas as an image, howto?

问题描述

我已经浏览了本教程，了解如何在HTML5中使用canvas来创建剪贴蒙版。
http：// www。 benbarnett.net/2011/06/02/using-html5-canvas-for-image-masks/

我现在的问题是有可能的将画布保存为图像（包括蒙版效果）？

谢谢

解决方案

获取PNG输出可以通过 canvas.toDataURL（）来完成。

也可以在Chrome / Firefox上获得JPEG输出。下面是一个将HTML数据转换为HTML5 Blob的代码。

  / ** 
 * http：// stackoverflow .com / questions / 4998908 / convert-data-uri-to-file-then-append-to-formdata / 5100158 
 * 
 * 
 * / 
 function dataURItoBlob（dataURI ，回调）{
 //将base64转换为保存在字符串中的原始二进制数据
 //不处理URLEncoded DataURI 
 
 var byteString; 
 if（dataURI.split（'，'）[0] .indexOf（'base64'）> = 0）{
 byteString = atob（dataURI.split（'，'）[1]） ; 
} else {
 byteString = unescape（dataURI.split（'，'）[1]）; 
} 
 
 //分离出mime组件
 var mimeString = dataURI.split（'，'）[0] .split（'：'）[1] .split （ ';'）[0]; 
 
 //将字符串的字节写入ArrayBuffer 
 var ab = new ArrayBuffer（byteString.length）; 
 var ia = new Uint8Array（ab）; 
 for（var i = 0; i< byteString.length; i ++）{
 ia [i] = byteString.charCodeAt（i）; 
} 
 
 //将ArrayBuffer写入一个blob，并完成
 var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder; 
 var bb = new BlobBuilder（）; 
 bb.append（ab）; 
返回bb.getBlob（mimeString）; 
} 
 
函数getAsJPEGBlob（canvas）{
 if（canvas.mozGetAsFile）{
 return canvas.mozGetAsFile（foo.jpg，image / jpeg ）; 
} else {
 var data = canvas.toDataURL（'image / jpeg'，0.7）; 
 var blob = dataURItoBlob（data）; 
返回blob; 
} 
} 
  

I have already looked into this tutorial on how to use canvas in HTML5 to create a clipping mask. http://www.benbarnett.net/2011/06/02/using-html5-canvas-for-image-masks/

The question i have now is it possible to save the canvas as an image (including the mask effect) ?

thanks

解决方案

Getting PNG output can be done with canvas.toDataURL().

It is also possible to get JPEG output on Chrome/Firefox. Below is a code to convert to JPEG data as HTML5 Blob.

   /**
    * http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158
    *
    *
    */
    function dataURItoBlob(dataURI, callback) {
        // convert base64 to raw binary data held in a string
        // doesn't handle URLEncoded DataURIs

        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
        } else {
            byteString = unescape(dataURI.split(',')[1]);
        }

        // separate out the mime component
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to an ArrayBuffer
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        // write the ArrayBuffer to a blob, and you're done
        var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);
        return bb.getBlob(mimeString);
    }

   function getAsJPEGBlob(canvas) {
        if(canvas.mozGetAsFile) {
            return canvas.mozGetAsFile("foo.jpg", "image/jpeg");
        } else {
            var data = canvas.toDataURL('image/jpeg', 0.7);
            var blob = dataURItoBlob(data);
            return blob;
        }
    }

这篇关于输出HTML5画布作为图像，howto？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！