Ready to live on the occasion of the New Year, the resulting renderings are like this, under the photo album, photos support drag and zoom

After generating the poster, it looks like this

1. Incomplete screenshot function of HTML2Canvas

window.pageYoffset = 0; document.documentElement.scrollTop = 0; document.body.scrollTop = 0; var scaleBy = window.devicePixelRatio; Html2canvas (document.getelementById ('photo'), {width:this.clientWidth, // Canvas width height:this.clientWidth*2.16, BackgroundColor :null,// Draw the image with white border, do not set the background to transparent color (NULL) useCORS: true,// Support image cross-domain scale:scaleBy,// Set the magnification factor dpi: WindowHeight: // windowHeight: // windowHeight: // windowHeight: // windowHeight: // Document.getelementbyid ('photo').scrollHeight}).then(canvas => {let img = new Image(); Let res = canvas. ToDataURL (' image/jpeg, 1.0); // toDataURL: base64 this.url=res; })Copy the code

1. If there is a scroll bar on the page, there is no problem with the scroll bar at the top to capture the picture, but it will cause incomplete interception once it is no longer at the bottom. When the scroll bar is above the position of the scroll bar, the solution is to make the scroll bar at the top:

 window.pageYoffset = 0;
 document.documentElement.scrollTop = 0;
 document.body.scrollTop = 0;
Copy the code

2. I also found another method to configure parameters in HTML2Canvas, but it did not take effect. I wonder if it is my writing method

height: document.getElementById('photo').scrollHeight,
windowHeight: document.getElementById('photo').scrollHeight
Copy the code

2. Blurred screenshot of HTML2Canvas

1. First of all, the displayed picture should be scaled to 0.62 times the width of the window. According to your needs, the height should be scaled to 0.62 times the height/width of the poster

Let clientWidth = document. DocumentElement. ClientWidth, / / window width < img: SRC = "url" Alt = "" ref = 'createImg' : style =" {width: ClientWidth * 0.62 + 'px, height: clientWidth * 2.16 * 0.62 +' px '} ">Copy the code

2. In addition, it is necessary to set the scale of the configuration parameter in HTML2Canvas. Setting DPI has no effect at all

3. Upload the image to obtain the actual width

GetFile (e){this.$toast.loading({message: 'loading... ', forbidClick: true, loadingType: 'spinner', }); let _this=this; LRZ (e.targe.files [0], {width: 1000 //quality: 0.8 // custom use compression}). Then (function(res) {_this.$toast.clear(); _this.photoUrl=res.base64; _this.userPic=res.base64; let imgSrc = res.base64; let img = new Image(); img.src = imgSrc; img.onload = function () { if(img.width<=img.height){ _this.$refs['dragImg'].style.height = 360*img.height/img.width+'px'; _this.$refs['dragImg'].style.width = 360+'px'; } else{ _this.$refs['dragImg'].style.height =img.height+'px'; _this.$refs['dragImg'].style.width = img.width+'px'; }} / / success implement}). The catch (function (error) {/ / failed to perform}), always (function () {/ / no matter success or failure, can perform})},Copy the code

1. Get the width and height of the image in the onload event of the image, and then scale it by 2 as required. Before uploading must compress the size of the picture, you upload a picture of 10 megabytes can directly support the death of wechat browser, I have to shut down from the start, with LRZ compression, very easy to use, return is base64 format, can be directly displayed on the page, do not have to turn to the actual path of the file file.

Smart use of VUE’s event agent

Actually, my frame is on top of the image, the frame floats on top, but if you want to drag the image, you need to use the event agent, which is the parent node, or even the sibling node

<section> <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- frame background -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > < div class = "bg" id = "bg" > < img: SRC = "imgSrc" id = 'defaultImg' alt="" :onerror='defaultImg'/> </div> <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the body photos -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > < div class = "person" id = "person" > < img: SRC = "photoUrl" ref="dragImg" title='photo' id='dragImg' :style="styleObj"/> </div> </section> <section class="test" @touchstart="touchstartHandle('dragImg',$event)" @touchmove="touchmoveHandle('dragImg',$event)"> </section>Copy the code