Requirements: draw sub-regions on the map and intercept the specified part to generate pictures and upload them to the server;

JS screenshots are nothing more than to convert DOM into pictures, which cannot be screenshots in the real sense. Only SVG and Canvas can achieve this effect after searching for them. Html2canvas is the most recommended online, which integrates two generation methods of SVG and canvas

Canvas can only be drawn little by little, compared to SVG with foreignObject tag, which can be directly thrown into the DOM for rendering.

html2canvas(document.body, { useCORS : true }).then(function(canvas) { console.log(canvas); // Canvas console.log(canvas.todataurl ('image/ PNG ')); }). Catch (function() {console.log(' intercepting failed '); });Copy the code

The elemelt-upload component that was previously used for file upload is now converted to the specified file object because of the new requirement on the existing functionality.

const bytes = window.atob(base64.split(',')[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {  
    ia[i] = bytes.charCodeAt(i);
};
let blobObj = new Blob([ab], { type: 'image/png' });
let newfile = new window.File([blobObj], _this.imgName + '.png', { type: blobObj.type })
Copy the code

Effect:

There was an error in the final submission

Cannot set property 'status' of null"
Copy the code

Status is the uploading status of an upload component, ready, uploading, success, and fail.

Because it was a manually generated picture, I did not go through the process of component selection of picture. When encapsulating file objects, I changed the status to ready state. The Network checked that the upload request was successful, but the component did not give a callback of success or failure.

Toss about for a long time finally helpless to read component source code, found that there is a call back inside.

Contrast the uid…

Watch to monitor

Finding that not giving a UID will help you add a UID to each object based on the timestamp, but not to the inner file object, and then compare that UID to the uid in the file object.

Finally add a unified UID to the inner and outer layers when wrapping the File object.

This type of problem is trivial but rare, so write it down to avoid future encounters.