Question

我有一个使用电子平台和Javascript的桌面应用程序，我使用以下方法将HTML5画布转换为JPEG：

<a id="download" download="Path.jpg">Download JPG</a>

然后，

function download(){ 
    dt = 'data:text/plain,foo'; 
    this.href=dt; }

这会刷新我的整个申请。

由于用户在画布上绘图，我不想刷新页面，只允许下载图像，然后用户可以继续在画布上绘图。

关于我做错了什么以及如何改变这种行为的任何指示？

下面的图片是一个截图，您可以在其中看到后面的画布，并绘制了一个蓝色方块。只要单击“保存”按钮，画布和整个页面就会刷新。

Answer 1

我猜你是想拍摄你的three.js场景的快照。您可以使用FileSaver.js将映像下载到本地计算机。

这是指向FileSaver.js https://github.com/eligrey/FileSaver.js/

的链接

在代码中包含FileSaver.js

你所要做的就是，

1）将画布转换为dataurl（将为您提供base64编码图像）

2）将base64数据转换为blob

3）将blob下载到本地计算机

将base64转换为blob的功能

var base64ToBlob : function( b64Data, contentType, sliceSize ) {
    return new Promise( function( resolve, reject ){
        contentType = contentType || '';
        sliceSize = sliceSize || 512;
        try{
            //converting each byte in the b64Data to a single character using the atob() method.
            var byteCharacters = atob(b64Data);
            var byteArrays = [];
            // a set of 'sliceSize' number of characters are processed at a time. 
            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                //slice holds a set of 'sliceSize' number of characters from the byteCharacters array.
                var slice = byteCharacters.slice(offset, offset + sliceSize);   
                //converting each character in 'slice' to the ASCII code.
                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }
                //creating a typed array structure using the ASCII codes of the characters.
                var byteArray = new Uint8Array(byteNumbers);
                byteArrays.push(byteArray);
            }
            //now byteArrays holds the whole bytes converted to the ASCII character codes
            //convert the typed array to the blob
            var blob = new Blob( byteArrays, { type : contentType } );
            resolve( blob );
        }
        catch( error ){
            reject( error );
        }
    } );
}

更改您的下载功能，

function download() {
    var dt = canvas.toDataURL('image/jpeg');
    //this.href = dt; //this line is causing the page redirection
    base64ToBlob( dt, 'image/png', 512 ).then( function( file ){ 
        FileSaver.saveAs(file, "image.png");//or use just saveAs( file, "image.png" )
    }, function( error ){
        console.log( error );
    } );
}

Answer 2

var anchorEvent = document.getElementById("download");
anchorEvent.addEventListener("click", function () {
    var dt = canvas.toDataURL('image/jpeg');
    this.href = dt;
    event.preventDefault();
});

event.preventDefault（）;是您的页面无法刷新的原因。它阻止您默认刷新按钮的功能。

将HTML5画布转换为jpeg时，Electron-Page会刷新

2 个答案: