вывод HTML5 canvas в виде изображения, как?

Question

Я уже изучил этот урок о том, как использовать canvas в HTML5 для создания обтравочной маски.http://www.benbarnett.net/2011/06/02/using-html5-canvas-for-image-masks/

Вопрос, который у меня сейчас есть, можно ли сохранить холст как изображение (включая эффект маски)?

спасибо

Answer 1

Получение вывода PNG можно сделать с помощью canvas.toDataURL().

Также возможно получить вывод JPEG в Chrome / Firefox. Ниже приведен код для преобразования в данные JPEG в формате HTML5 Blob.

   /**
    * /4077013/preobrazuite-uri-dannyh-v-fail-zatem-dobavte-v-formdata
    *
    *
    */
    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;
        }
    }

Answer 2

canvas.toDataURL();

- это функция , чтобы получить URL данных , который вы можете поместить в тег изображения. Оттуда вы можете сохранить его.

Если вы хотите автоматически сохранить его на жесткий диск, это невозможно в стандартном JavaScript