當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,...

發布時間：2024/1/18 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一，前端合成帶水印的圖片

? 一般來說，生成帶水印的圖片由后端生成，但不乏有時候需要前端來處理。當然，前端處理圖片一般不建議，一方面js的處理圖片的方法不全，二是有些老版本的瀏覽器對canvas的支持度不夠。

下面我們就說說，利用canvas 生成帶水印的圖片。

1、我們要實現一下效果

2、創建一個canvas

var canvas = document.createElement('canvas');var time = new Date();var logoCanvas =time+' '+'http://www.cnblogs.com/zuoan-oopp'; // 水印var context = canvas.getContext('2d');

3，繪制圖片

var imgUpload = new Image();imgUpload.src =src;imgUpload.onload = function () {context.drawImage(imgUpload, 0, 0,imgUpload.width,imgUpload.height,0,0,imgWidth,imgHeight); }

4，按照1024*768的比例壓縮圖片

5，給canvas添加背景和水印

canvas.height = imgHeight+60; // 給canvas 賦值高度 context.save();context.fillStyle = "green";context.fillRect(0,0,imgWidth,imgHeight+60); // 繪制圖片的背景 context.restore();context.save();context.font="100px PingFangSC-Regular microsoft yahei";context.fillStyle = "#000";context.restore();

6，如果水印文字太長要換行，代碼如下：

for(let i=0;i<logoCanvas.length;i++){ // 字數換行lineWidth+=context.measureText(logoCanvas[i]).width; if(lineWidth>canvas.width-20){ context.fillText(logoCanvas.substring(lastSubStrIndex,i),10,initHeight);//繪制截取部分initHeight+=20;//20為字體的高度height+=20;lineWidth=0;lastSubStrIndex=i;} if(i==logoCanvas.length-1){//繪制剩余部分context.fillText(logoCanvas.substring(lastSubStrIndex,i+1),10,initHeight);}}

7，canvas轉換成base64位，以圖片的形式展示

var url=canvas.toDataURL("image/jpg", 0.8); // canvas轉換成base64位var newImg = new Image(); newImg.src = url;newImg.onload = function() {document.getElementById('imgUpload').append(newImg);};

注意：toDataURL函數可能會出現跨域的問題，請在同一個服務器下操作

二，圖片上傳

?1，圖片上傳到服務器要轉換成文檔流（二進制blob）的形式。所以無論上傳canvas，還是img，要先轉換成文檔流

?2、canvas 轉換成文檔流，利用toBlob方法轉換

canvas.toBlob(function(blob) {//創建formevar form = new FormData();form.append('file', blob); $.POST(url, {data:formData,processData: false,contentType: false,}).done(function(data) {console.log('回調函數')}).fail((data,textStatus)=>{console.log('失敗函數')})});

注意：次方法兼容性不太好，，低版本的chrome不支持，安卓4.4.2版本都不支持（只測了這一個版本），各瀏覽器的兼容性如下：

?3，canvas 直接轉換成文檔流兼容性不太好，但是這個功能又必須做，怎么辦，，，那么我們就換種方式，，使用base64位上傳。

4，除了base64位上傳，還想使用blob二進制文檔流上傳，怎么辦。。。我們可以使用window對象提供的atob函數

5、WindowOrWorkerGlobalScope.atob()函數用來解碼一個已經被base-64編碼過的數據。你可以使用?window.btoa()?方法來編碼一個可能在傳輸過程中出現問題的數據，并且在接受數據之后，使用?window.atob() 方法來將數據解碼。

6，將base64位轉換成blob,這樣就可以避免低版本的chrome不支持了。

url = url.replace("data:image/png;base64,", "");var blob = b64toBlob(src);var formData = new FormData();formData.append("file",blob);$.POST(url, {data:formData,processData: false,contentType: false,}).done(function(data) {console.log('回調函數')}).fail((data,textStatus)=>{console.log('失敗函數')})// 將base64位轉換成blobfunction b64toBlob(b64Data, contentType, sliceSize) {contentType = contentType || '';sliceSize = sliceSize || 512;var byteCharacters = atob(b64Data);var byteArrays = [];for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {var slice = byteCharacters.slice(offset, offset + sliceSize);var byteNumbers = new Array(slice.length);for (var i = 0; i < slice.length; i++) {byteNumbers[i] = slice.charCodeAt(i);}var byteArray = new Uint8Array(byteNumbers);byteArrays.push(byteArray);}var blob = new Blob(byteArrays, {type: contentType});return blob;}

ablob兼容性如下：

?三，源代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>合成水印</title><script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><style type="text/css">*{margin:0;padding:0;}.content{display:block;margin: 30px;}.content:after{content: "";display:block;clear:both;}.content li{float: left;margin-left:30px;list-style: none;}.img-wrap{display:-webkit-box;-webkit-box-align:center;-webkit-box-pack: center;width:500px;height:400px;}.img-wrap img{max-width: 100%;max-height:100%;}.img-wrap canvas{max-width: 100%;max-height:100%;}</style> </head> <body><ul class="content"><li><p>原圖</p><div class="img-wrap"><img src="2.jpg"/></div></li><li><p>加水印的canvas</p><div id="imgContent" class="img-wrap"></div></li><li><p>加水印的img</p><div id="imgUpload" class="img-wrap"></div></li></ul><script type="text/javascript">var src = $('img').attr('src');var canvas = document.createElement('canvas');var time = new Date();var logoCanvas =time+' '+'http://www.cnblogs.com/zuoan-oopp'; // 水印var context = canvas.getContext('2d');// 這是上傳圖像var imgUpload = new Image();imgUpload.src =src;imgUpload.onload = function () {// 繪制var width = imgUpload.width;var height= imgUpload.height;var scale,imgWidth,imgHeight; // 縮放比 ,按照1024*768縮放if(width>height){ // 橫著拍if(width>1024){ //寬大于1024scale = 1024/width;imgWidth =1024;imgHeight = height*scale; // 算出按照寬1024，的等比壓縮后的高if(imgHeight>768){ // 若高>768,算出等比768縮放的寬scale = 768/imgHeight;imgHeight = 768;imgWidth = imgWidth*scale;}}else{imgWidth = width;imgHeight = height}}else{ // 縱著拍的或者正方形if(height>1024){ // 高大于1024scale = 1024/height;imgHeight =1024;imgWidth = width*scale; // 算出按照寬1024，的等比壓縮后的高if(imgWidth>768){ // 若高>768,算出等比768縮放的寬scale = 768/imgWidth;imgWidth = 768;imgHeight = imgHeight*scale;}}else{imgWidth = width;imgHeight = height}}canvas.width = imgWidth; // geicanvas賦值寬度canvas.height = imgHeight+60; // 給canvas 賦值高度 context.save();context.fillStyle = "green";context.fillRect(0,0,imgWidth,imgHeight+60); // 繪制圖片的背景 context.restore();context.save();context.font="100px PingFangSC-Regular microsoft yahei";context.fillStyle = "#000";context.restore();context.drawImage(imgUpload, 0, 0,imgUpload.width,imgUpload.height,0,0,imgWidth,imgHeight);var lineWidth = 0var initHeight=imgHeight+30;//繪制字體距離canvas頂部初始的高度var lastSubStrIndex= 0; //每次開始截取的字符串的索引 for(let i=0;i<logoCanvas.length;i++){ // 字數換行lineWidth+=context.measureText(logoCanvas[i]).width; if(lineWidth>canvas.width-20){ context.fillText(logoCanvas.substring(lastSubStrIndex,i),10,initHeight);//繪制截取部分initHeight+=20;//20為字體的高度height+=20;lineWidth=0;lastSubStrIndex=i;} if(i==logoCanvas.length-1){//繪制剩余部分context.fillText(logoCanvas.substring(lastSubStrIndex,i+1),10,initHeight);}}var url=canvas.toDataURL("image/jpg", 0.8); // canvas轉換成base64位var newImg = new Image(); newImg.src = url;newImg.onload = function() {document.getElementById('imgUpload').append(newImg);};document.getElementById('imgContent').append(canvas); // 將canvas繪制的圖片存放在imgContent里 };canvas.toBlob(function(blob) {//創建formevar form = new FormData();form.append('file', blob); $.POST(url, {data:formData,processData: false,contentType: false,}).done(function(data) {console.log('回調函數')}).fail((data,textStatus)=>{console.log('失敗函數')})});url = url.replace("data:image/png;base64,", "");var blob = b64toBlob(src);var formData = new FormData();formData.append("file",blob);$.POST(url, {data:formData,processData: false,contentType: false,}).done(function(data) {console.log('回調函數')}).fail((data,textStatus)=>{console.log('失敗函數')})// 將base64位轉換成blobfunction b64toBlob(b64Data, contentType, sliceSize) {contentType = contentType || '';sliceSize = sliceSize || 512;var byteCharacters = atob(b64Data);var byteArrays = [];for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {var slice = byteCharacters.slice(offset, offset + sliceSize);var byteNumbers = new Array(slice.length);for (var i = 0; i < slice.length; i++) {byteNumbers[i] = slice.charCodeAt(i);}var byteArray = new Uint8Array(byteNumbers);byteArrays.push(byteArray);}var blob = new Blob(byteArrays, {type: contentType});return blob;}</script> </body> </html>

四，參考文檔

?1、https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/atob

?2、https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

轉載于:https://www.cnblogs.com/zuoan-oopp/p/8006524.html

總結

以上是生活随笔為你收集整理的使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：近红外和短波红外的区别
下一篇： 7年java水平_7年Java开发（月薪