摘要:所以需要在這里做一個判斷。使用的內聯樣式時遇上的寫法問題直接使用手機拍照得到的圖片方向有問題
原文鏈接:鏈接描述
使用vue+html2canvas+exif-js
github地址
線上demo
上傳圖片
對圖片進行操作:移動、放大、縮小
合成海報
具體功能: 上傳圖片html:
js
getPhoto () { var imageInput = document.querySelector("#image-input") var that = this imageInput.addEventListener("change", function (e) { reads = new FileReader() reads.readAsDataURL(this.files[0]) reads.addEventListener("load", function (e) { that.imgUrl = this.result that.myImg.position.x = 0 that.myImg.position.y = 0 that.myImg.scale = 1 var orientation that.previewImg.addEventListener("load", function () { Exif.getData(that.previewImg, function() { // 獲取圖像的數據 Exif.getAllTags(this); // 獲取圖像的全部數據,值以對象的方式返回 orientation = Exif.getTag(this, "Orientation"); // 獲取圖像的拍攝方向 var rotateCanvas = document.createElement("canvas"), rotateCtx = rotateCanvas.getContext("2d"); // 針對圖像方向進行處理 switch (orientation) { case 1 : rotateCanvas.width = that.previewImg.width; rotateCanvas.height = that.previewImg.height; rotateCtx.drawImage(that.previewImg, 0, 0, that.previewImg.width, that.previewImg.height); break; case 6 : // 順時針 90 度 rotateCanvas.width = that.previewImg.height; rotateCanvas.height = that.previewImg.width; rotateCtx.translate(0, 0); rotateCtx.rotate(90 * Math.PI / 180); rotateCtx.drawImage(that.previewImg, 0, -that.previewImg.height, that.previewImg.width, that.previewImg.height); break; case 8 : rotateCanvas.width = that.previewImg.height; rotateCanvas.height = that.previewImg.width; rotateCtx.translate(0, 0); rotateCtx.rotate(-90 * Math.PI / 180); rotateCtx.drawImage(that.previewImg, -that.previewImg.width, 0, that.previewImg.width, that.previewImg.height); break; case 3 : // 180 度 rotateCanvas.width = that.previewImg.width; rotateCanvas.height = that.previewImg.height; rotateCtx.translate(0, 0); rotateCtx.rotate(Math.PI); rotateCtx.drawImage(that.previewImg, -that.previewImg.width, -that.previewImg.height, that.previewImg.width, that.previewImg.height); break; default : rotateCanvas.width = that.previewImg.width; rotateCanvas.height = that.previewImg.height; rotateCtx.drawImage(that.previewImg, 0, 0, that.previewImg.width, that.previewImg.height); } var rotateBase64 = rotateCanvas.toDataURL("image/jpeg", 0.5); }); }) }) }) }移動圖片
對圖片和相框綁定@touchstart @touchmove @touchend
getInitPosition (e) { event.preventDefault() if (this.imgUrl) { var length = e.touches.length if (length > 1) { let pointOne = e.touches[0] let pointTwo = e.touches[1] this.initTouchX = pointOne.clientX - pointTwo.clientX this.initTouchY = pointOne.clientY - pointTwo.clientY } else { var touches = e.touches[0] this.initTouchX = touches.clientX this.initTouchY = touches.clientY } } }, getMovePosition (e) { event.preventDefault() if (this.imgUrl) { var length = e.touches.length if (length > 1) { let pointOne = e.touches[0] let pointTwo = e.touches[1] this.changeTouchX = pointOne.clientX - pointTwo.clientX this.changeTouchY = pointOne.clientY - pointTwo.clientY var scale = (this.changeTouchX - this.initTouchX) > (this.changeTouchY - this.initTouchY) ? (this.changeTouchX / this.initTouchX) : (this.changeTouchY / this.initTouchY) scale *= this.myImg.lastScale this.myImg.scale = scale > 3 ? 3 : scale < 0.5 ? 0.5 : scale } else { var touches = e.touches[0] this.changeTouchX = touches.clientX - this.initTouchX this.changeTouchY = touches.clientY - this.initTouchY this.myImg.position.x = this.lastTouchX + (this.changeTouchX / this.myImg.scale) this.myImg.position.y = this.lastTouchY + (this.changeTouchY / this.myImg.scale) } } }, getLeavePosition (e) { this.myImg.lastScale = this.myImg.scale if (e.touches.length > 0) { var touches = e.touches[0] this.initTouchX = touches.clientX this.initTouchY = touches.clientY } this.lastTouchX = this.myImg.position.x this.lastTouchY = this.myImg.position.y },合成圖片
createPhoto () { if (this.imgUrl) { let photoBox = document.querySelector(".photo-box") newImgWidth = photoBox.style.offsetWidth let newImgHeight = photoBox.style.offsetHeight let scale = window.devicePixelRatio let that = this html2canvas(photoBox, { width: newImgWidth, height: newImgHeight, scale: scale, useCORS: true }).then(function (canvas) { var dataUrl = canvas.toDataURL("image/jpg") localStorage.imgData = dataUrl that.$router.push({ name: "share", params: { storage: "imgData" } }) }) } else { alert("請上傳圖片") } }遇到的問題
1) 在瀏覽器上阻止縮放的問題
在tounchmove時使用event.preventDefault()
2) 合成圖片的清晰度
在html2canvas寫參數時,scale = window.devicePixelRatio
3) 對圖片進行縮放時,對距離的判斷
這里需要區分兩種情況: - 兩指縮放 - 一指移動 在兩指縮放后會有一個手放手另一個手繼續操作的情況。這樣在touchend時,e.touches還存在一個元素。所以需要在這里做一個判斷。
4) 使用vue的:style="內聯樣式"時遇上的寫法問題
:style="{transform:"scale("+ myImg.scale+ ") translate("+myImg.position.x+"px,"+myImg.position.y+"px)"}"
5)直接使用手機拍照得到的圖片方向有問題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109610.html
摘要:本文將介紹如何生成一張海報圖片,以及可能會碰到的問題和解決方案。轉圖片目前移動端瀏覽器對于的支持非常好,而可以通過來轉換成圖片。 隨著APP的獲客成本越來越高,很多產品開始從wap頁引流,而最常見的方式便是分享,尤其是在微信中。因此誕生了一些新玩法,比如生成一張海報圖片,用戶可以保存或分享到其他平臺。 本文將介紹如何生成一張海報圖片,以及可能會碰到的問題和解決方案。 canvas轉圖片...
摘要:解析進到首頁其實關鍵字在本地就隨機取完了,在首頁中的方法中就通過緩存了要畫的元素,比如關鍵字這里是圖片關鍵字解析語也是圖片畢竟微信小程序的不支持字體等等。 一、Canvas應用的背景(個人理解)及基礎語法 背景 從2012年開始,微信那個時候用戶的積累的量已經非常大了,推出公眾號,當然大屏智能手機在那個時候也流行,傳統的大眾媒體逐步消亡,像微信公眾號這樣的新媒體盛行。企業的廣告投入開始...
摘要:用小程序云開發將博客小程序常用功能一網打盡本文介紹博客小程序的詳情頁的功能按鈕如何實現,具體包括評論點贊收藏和海報功能,這里記錄下整個實現過程和實際編碼中的一些坑。考慮到小程序本身的大小限制,使用的方式是最佳的。 用小程序·云開發將博客小程序常用功能一網打盡 本文介紹mini博客小程序的詳情頁的功能按鈕如何實現,具體包括評論、點贊、收藏和海報功能,這里記錄下整個實現過程和實際編碼中的一...
摘要:用小程序云開發將博客小程序常用功能一網打盡本文介紹博客小程序的詳情頁的功能按鈕如何實現,具體包括評論點贊收藏和海報功能,這里記錄下整個實現過程和實際編碼中的一些坑。考慮到小程序本身的大小限制,使用的方式是最佳的。 用小程序·云開發將博客小程序常用功能一網打盡 本文介紹mini博客小程序的詳情頁的功能按鈕如何實現,具體包括評論、點贊、收藏和海報功能,這里記錄下整個實現過程和實際編碼中的一...
閱讀 1148·2021-09-22 15:43
閱讀 2345·2021-09-22 15:32
閱讀 4455·2021-09-22 15:11
閱讀 2188·2019-08-30 15:55
閱讀 2564·2019-08-30 15:54
閱讀 984·2019-08-30 15:44
閱讀 1095·2019-08-29 13:26
閱讀 794·2019-08-29 12:54