Maison > Article > interface Web > Comment implémenter la fonction de recadrage des images et de téléchargement sur le serveur en vue
Cet article présente principalement la fonction de recadrage des images et de téléchargement sur le serveur dans Vue. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent se référer au
lien d'aperçu et cliquer pour prévisualiser
Rendu Comme indiqué ci-dessous, tout le monde se sent bien, veuillez vous référer au code d'implémentation.
Exigences
Étapes d'implémentation
methods:funName() - correspond à la méthode funName dans les méthodes de la source code data:dataName - correspond au funName dans data dans le code source dataName dataSélection et lecture d'images1.
2. Affichez les images dans le canevas
Canevas dont vous avez besoin. master Connaissances associées :
# 语法 ctx.drawImage(image, dx, dy); ctx.drawImage(image, dx, dy, dWidth, dHeight); ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); # 参数 image # 绘制的元素(可以为HTMLImageElement,HTMLVideoElement,或者 HTMLCanvasElement。) dx,dy # 目标画布(destination canvas)左上角的坐标 dWidth,dHeight # 目标画布(destination canvas)上绘制图像宽高 sx,sy # 源画布(source canvase)左上角的坐标 sWidth,sHeight # 源画布(source canvase)选择的图像宽高
5. Recadrer l'image ctx.clip();
Étapes spécifiques :
3. Déplacez le cadre de recadrage.
Points de connaissance : onmousedown, onmousemove, onmouseupImplémentation spécifique :methods:drag()
canvas.onmousedown = e => { let [lastX, lastY] = [e.offsetX, e.offsetY]; self.movement = true; canvas.onmousemove = e => { self.circleCenter = { X: self.cropperCanvasSize.width > 2 * self.slectRadius ? self.circleCenter.X + (e.offsetX - lastX) : self.cropperCanvasSize.width / 2, Y: self.cropperCanvasSize.height > 2 * self.slectRadius ? self.circleCenter.Y + (e.offsetY - lastY) : self.cropperCanvasSize.height / 2 }; self.renderCropperImg(); [lastX, lastY] = [e.offsetX, e.offsetY]; }; canvas.onmouseup = e => { self.movement = false; canvas.onmousemove = null; canvas.onmouseup = null; }; };
4. Télécharger des images sur le serveur
Connaissances points :
methods:upload() this.$refs.preview.toBlob((blob)=> { const url = URL.createObjectURL(blob); const formData = new FormData(); formData.append(this.uploadProps.name, blob, `${Date.now()}.png`); if(this.data){ Object.keys(this.uploadProps.data).forEach(key => { formData.append(key, this.uploadProps.data[key]); }); } const request = new XMLHttpRequest(); request.open("POST", this.uploadProps.action, true); request.send(formData); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { // ... } }; });Ce qui précède est ce que J'ai compilé Tout le monde, j'espère que cela sera utile à tout le monde à l'avenir. Articles associés :
Utiliser ES6 pour résoudre le problème de fuite de mémoire via WeakMap (tutoriel détaillé)
Utiliser jquery pour cliquez sur Entrée pour obtenir l'effet de connexion (tutoriel détaillé)
Définissez les variables globales ou les méthodes de données en fonction de la vue (tutoriel détaillé)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!