Question

我尝试将画布图像转换为blob。这可以使用toBlob() polyfile来完成。它适用于桌面浏览器，但在iPhone上我没有任何blob。大小始终为零。

这是一个JsFiddle：http://jsfiddle.net/confile/h7zV3/

如何从iPhone上的画布获取Blob？

以下是我使用的代码：

    <input id="file" type="file" />

    <img id="img">

    <br>canvas<br>

    <canvas id="mycanvas" ></canvas>


<script type="text/javascript">

$(function(){

    var $inputFile = $("#file"),
    inputFile = $inputFile[0],
    $img = $("#img"),
    img = $img[0];


    var tmpImage = img; // document.createElement("img");


    $inputFile.on("change", function() {
        var files = inputFile.files;

        if (!files || !files.length) 
            return

        var reader = new FileReader()

        reader.onload = function(progressEvent) {

            console.log("reader.result: "+reader.result);

            tmpImage.onload = function() {
                var canvas = $("#mycanvas")[0]; //document.createElement("canvas"),
                context = canvas.getContext("2d");

                canvas.width = this.width;
                canvas.height = this.height;
                context.drawImage(this, 0, 0);


                var dataUrlValue = canvas.toDataURL(); //canvas.toDataURL("image/jpeg");
                alert(dataUrlValue);
                var myBlob1 = dataURItoBlob(dataUrlValue);
                console.log(myBlob1);
                alert(myBlob1.size);


                canvas.toBlob(function(blob) {
                    console.log("done");
                    alert(blob.size);


                }, 'image/jpeg');

            }; // end onload
            tmpImage.src = reader.result;   

        };
        reader.readAsDataURL(files[0]);


    });


});  // end JQuery
</script>

Answer 1

使用此插件JavaScript-Canvas-to-Blob将canvas元素转换为Blob对象。

然后以与本机实现相同的方式使用 canvas.toBlob（）方法

Answer 2

您可以使用。

var data = context.getImageData(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT);

返回数组的每个元素都是图像的一个字节，考虑到图像按RGB顺序为每个像素3个字节。

for(var i = 0; i < data.length; i++) {
  // do something for saving the data (bytes) in the format you need
  // ... if you need to
}

Canvas toBlob在iPhone Safari上不起作用？

2 个答案: