The website version of XICI is online for a while. I have to say, it’s more easier for me to create a subtitles screenshots-joint directly in my computer. I used to make screenshots in my computer and transfer to my mobile by wechat, then use the mini-program version of XICI. However I didn’t have no much time to test and optimize it, so there are some aawkward bugs. I have to apologize and will fix that bugs later.

Today I just fixed a bug that when your joint is too big to save, and I find a way to save large image from canvas.

I found it last day when I was doing with some “The Legend of 1900” movie’s screenshots. It’s occurred everytime when the image is a bit of long. All the savable images sizes are under 2M. So my first thought was “too big to save”.

The current method to save image is, the canvas will draw the image when user click save button, and then using toDataURL api to get the base64 code of the image and place it into a a[download]‘s href attribute. When user clicks that button it will download automatically.

Too large size will fail the download, not to mention the base64 coding will create 1/3 size of image. So I need to change a plan.

As a front-end developer, I always believes in javascript. So I excluded all the method which deal with backend. At last I found the Canvas.toBlob api. The MDN documentation says it very clear:

The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.

Then is the calling problem:

1
2
3
4
5
6
7
8
9
10
canvas.toBlob(
  blob => {
    let el = document.createElemenet("a");
    el.download = `戏词拼图_${new Date().getTime()}`; // set file name
    el.href = URL.createObjectURL(blob); // set file address
    el.click();
  },
  "image/jpeg", // set file format
  1 // set file quanlity
);

By creating a a[download] click event, we can download the image after the method is done.

#EOF