需求：
實(shí)現(xiàn)在線圖片編輯羔味，為原圖片添加角標(biāo)河咽。
解決方案
添加Canvas
首先判斷Canvas是否存在赋元，如果不存在則創(chuàng)建Canvas對(duì)象忘蟹。具體代碼如下：
if(document.getElementById('materialCanvas')==null){
var materialCanvas = $("<canvas id='materialCanvas'></canvas>");
materialCanvas.width=1024;
materialCanvas.height=512;
console.log($("#pre"));
$("#pre").append(materialCanvas);
}
其中需要說明的是
- Canvas的寬高不需要加單位（單位為像素）们陆，其寬高默認(rèn)為300*150寒瓦。
- Canvas的寬高跟CSS的寬高不是一回事坪仇，不可混淆。
- drawImage函數(shù)中的位置參數(shù)都是以像素為單位的椅文，畫圖中需要考慮畫圖位置喂很、大小和Canvas邊界皆刺。
下面在Canvas中畫圖
img1是角標(biāo)圖片少辣，其位置通過用戶選擇映射為不同的參數(shù)羡蛾，具體代碼如下：
var ctx = document.getElementById('materialCanvas').getContext('2d');
var img = new Image();
img.crossOrigin="anonymous";
img.src='<s:url value="/css/images/demo.jpg" />';
var img1 = new Image();
img1.crossOrigin="anonymous";
img1.src=corner.url;
ctx.clearRect(0,0,300,150);
img.onload=function(){
ctx.globalCompositeOperation="destination-over";//source-over
ctx.drawImage(img,0,0,1024,512);
}
img1.onload=function(){
ctx.globalCompositeOperation="source-over";//source-over
ctx.drawImage(img1,positionmap[cornerPosition][0],positionmap[cornerPosition][1]);
}
此處要留意兩個(gè)問題漓帅，分別是：
- globalCompositeOperation設(shè)置痴怨，此處用到destination-over（新圖象在下）忙干、source-over（新圖像在上）兩個(gè)參數(shù)浪藻。
- 我們采用的圖片來自不同的網(wǎng)站捐迫，存在跨域問題爱葵，需要設(shè)置圖片允許跨域施戴。具體設(shè)置屬性為crossOrigin萌丈，參數(shù)為anonymous赞哗。
將Canvas保存為圖片文件
代碼如下：
function convertBase64UrlToBlob(urlData,type){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的頭辆雾，并轉(zhuǎn)換為byte
//處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/'+type});
}
var ctx = document.getElementById('materialCanvas');
var dataURL = ctx.toDataURL("image/png",1.0);
var file1=convertBase64UrlToBlob(dataURL,"png");
其中
- toDataURL函數(shù)是HTML5 Canvas對(duì)象的方法懈玻，可以將Canvas保存為Base64編碼的圖片乾颁。返回結(jié)果是一串Base64的編碼涂乌。
- convertBase64UrlToBlob函數(shù)將圖片的Base64編碼轉(zhuǎn)化為blob文件對(duì)象英岭。
最后將文件提交：
var filename=$("#textfield").val();
filename=filename.split("\\");
file1.name=filename[filename.length-1];
var formobj = document.getElementById("uploadForm");
var formdata = new FormData(formobj);
formdata.set("file", file1,file1.name);
$.ajax({
url : "http://localhost:8085/material/upload",
type : "POST",
data : formdata,
cache: false,
processData: false,
contentType: false,
success : function(data) {
$( '#serverResponse').html(data);
},
error : function(data) {
$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
}
})
其流程為根據(jù)原文件表單獲取Formdata湾盒，將新文件賦值給Formdata對(duì)象诅妹，使用Ajax提交Formdata數(shù)據(jù)罚勾。
PS：Formdata的set方法是設(shè)置key吭狡、value尖殃。其他還有很多API具體Google或百度划煮。
Over送丰！
9月6日更新：
上文中將Canvas保存為圖片文件的程序轉(zhuǎn)化后的文件會(huì)比圖片原來的文件大很多弛秋，例如10KB的jpg圖片轉(zhuǎn)換后會(huì)變?yōu)榇蟾?0KB器躏，對(duì)于文件上傳有大小限制的情景不適用。
我又找到新的轉(zhuǎn)換方式登失，具體code如下：
var ctx = document.getElementById('materialCanvas');
var file1;
ctx.toBlob(function(blob){file1=blob},"image/jpeg",0.6);
其中toBlob的第一個(gè)參數(shù)是回調(diào)函數(shù)遏佣，轉(zhuǎn)換完成后調(diào)用揽浙。第三個(gè)參數(shù)是圖片質(zhì)量状婶，給我的感覺更像壓縮比馅巷，進(jìn)行適當(dāng)?shù)膲嚎s可以在圖片質(zhì)量降低不多的情況下太抓，最大限度的減小圖片存儲(chǔ)大小令杈。注意：轉(zhuǎn)換需要過程走敌，回調(diào)函數(shù)是個(gè)異步的過程逗噩。
一個(gè)函數(shù)搞定掉丽，簡直了异雁。還是讀書少按氛稀！
