資訊專欄INFORMATION COLUMN
摘要：預覽效果不廢話，貼源碼讀取文件導出文件地址取到圖片原始尺寸解決透明圖片，出現黑色背景的問題如果不存在，或者異常錯誤，不影響后續執行根據設置的，進行尺寸壓縮對預覽圖進行質量壓縮導出的圖片路徑調用
預覽效果：
不廢話，貼源碼：
f.getFileAsUrl = function(file, back) {
var reader = new FileReader();
// 讀取文件base64
reader.readAsDataURL(file);
reader.onload = function(evt) {
// 導出文件地址
back(evt.target.result);
}
};
f.getBase64 = function(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
};
f.zipImgBackUrl = function(base64Img, back, size) {
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = base64Img;
img.onload = function() {
// 取到圖片原始尺寸
var w = img.width;
var h = img.height;
if (size.width && size.height) {
if (size.width > size.height) {
size.height = false;
} else {
size.width = false;
}
}
if (!size) {
c.width = w;
c.height = h;
} else if (size.width) {
if (size.width < w) {
c.width = size.width;
c.height = h * size.width / w;
} else {
c.width = w;
c.height = h;
}
} else if (size.height) {
if (size.height < h) {
c.height = size.height;
c.width = w * size.height / h;
} else {
c.width = w;
c.height = h;
}
}
// 解決透明圖片，出現黑色背景的問題
var opacityImg = new Image();
var base64 = localStorage.getItem("opacityImg");
var hasLocal = base64 && /^data:image/.test(base64);
if (hasLocal) {
opacityImg.src = base64;
} else {
opacityImg.src = "/images/opacity-bg.jpg";
}
opacityImg.onload = function() {
if (!hasLocal) {
base64 = f.getBase64(opacityImg);
localStorage.setItem("opacityImg", base64);
}
ctx.fillStyle = ctx.createPattern(opacityImg, "repeat");
fillImg(ctx,c,img,back);
};
//如果opacityImg不存在，或者異常錯誤，不影響后續執行
opacityImg.onerror = function(){
ctx.fillStyle = "#f0f0f0";
fillImg(ctx,c,img,back);
};
function fillImg(ctx,c,img,back){
ctx.fillRect(0, 0, c.width, c.height);
// 根據設置的size，進行尺寸壓縮
ctx.drawImage(img, 0, 0, w, h, 0, 0, c.width, c.height);
//對預覽圖進行質量壓縮
var src = c.toDataURL("image/jpeg", 0.5);
// 導出base64的圖片路徑
back(src);
}
};
};
調用：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93935.html
摘要：以上傳圖片為例。我們可以通過獲取上傳的圖片相關信息，但是想要實現本地預覽還需要借助來實現可以讀取本地圖片，并將圖片數據轉換成編碼的字符串形式嵌入到頁面中。在我們實現上傳圖片的效果里，就有用到。圖片預覽兼容處理及以下版本不支持和。 最近項目里需要用到上傳圖片并預覽的功能，于是寫了個jQuery預覽圖片插件，下載地址。如果有需要的，可以直接下載。第一次寫jQuery插件，如有不對之處，歡迎...
摘要：與介紹只是對象的一個屬性，可以判斷圖片加載完成，不管圖片是不是有緩存而則是這個對象的事件回調，當圖片加載完成后執行綁定的函數。第三次點擊，谷歌瀏覽器結果為瀏覽器結果為。例打印結果第一次點擊，谷歌瀏覽器結果為瀏覽器結果為空。 onload與complete介紹 complete只是HTMLImageElement對象的一個屬性，可以判斷圖片加載完成，不管圖片是不是有緩存；而onload則...
摘要：簡介本文結合實際項目場景，記錄圖片上傳時的一種本地壓縮預覽解決方案。考慮到這些問題，決定采用本地圖片進行預覽。解決過程接下來說明將待上傳的本地圖片展示到界面中。這樣就在前端實現了簡單的圖片壓縮處理。 簡介 本文結合實際項目場景，記錄圖片上傳時的一種本地壓縮預覽解決方案。這里的本地預覽是指，頁面上的圖片是讀取的本機資源進行展示，而沒有通過網絡請求加載。 實際的項目場景 在這陣子的項目開發...
摘要：使用監聽的，一旦有發生，就表示服務器回傳了信息增加上傳文件類型限制思考這種方式對于單張圖片上傳沒有問題，如果是多張，該怎樣優化 實現邏輯 首先要知道， ajax無法發送帶有文件的post請求所以，所以還是要用同步的方式，但是刷新的時候，我們不要在原來的頁面刷新，去一個隱藏的iframe里面刷新，form表單中action正常填寫處理文件上傳的操作。緊著著的target填寫一個隱藏的if...
閱讀 3053·2021-09-08 10:43
閱讀 1039·2019-08-30 15:53
閱讀 989·2019-08-30 13:51
閱讀 849·2019-08-29 14:03
閱讀 810·2019-08-26 18:35
閱讀 1242·2019-08-26 13:38
閱讀 1592·2019-08-26 10:34
閱讀 3506·2019-08-26 10:21
