canvas2image.js

蔚落 2024-02-19 18:53 60阅读 0赞

var Canvas2Image = (function() \{  
var bHasCanvas = false;  
var oCanvas = document.createElement("canvas");  
if (oCanvas.getContext("2d")) \{  
bHasCanvas = true;  
\}  
if (!bHasCanvas) \{  
return \{  
saveAsBMP: function() \{\},  
saveAsPNG: function() \{\},  
saveAsJPEG: function() \{\}  
\}  
\}  
var bHasImageData = !!(oCanvas.getContext("2d").getImageData);  
var bHasDataURL = !!(oCanvas.toDataURL);  
var bHasBase64 = !!(window.btoa);  
var strDownloadMime = "image/octet-stream";  
var readCanvasData = function(oCanvas) \{  
var iWidth = parseInt(oCanvas.width);  
var iHeight = parseInt(oCanvas.height);  
return oCanvas.getContext("2d").getImageData(0, 0, iWidth, iHeight);  
\}  
var encodeData = function(data) \{  
var strData = "";  
if (typeof data == "string") \{  
strData = data;  
\} else \{  
var aData = data;  
for (var i = 0; i < aData.length; i++) \{  
strData += String.fromCharCode(aData\[i\]);  
\}  
\}  
return btoa(strData);  
\}  
var createBMP = function(oData) \{  
var aHeader = \[\];  
var iWidth = oData.width;  
var iHeight = oData.height;  
aHeader.push(0x42);  
aHeader.push(0x4D);  
var iFileSize = iWidth \* iHeight \* 3 + 54;  
aHeader.push(iFileSize % 256);  
iFileSize = Math.floor(iFileSize / 256);  
aHeader.push(iFileSize % 256);  
iFileSize = Math.floor(iFileSize / 256);  
aHeader.push(iFileSize % 256);  
iFileSize = Math.floor(iFileSize / 256);  
aHeader.push(iFileSize % 256);  
aHeader.push(0);  
aHeader.push(0);  
aHeader.push(0);  
aHeader.push(0);  
aHeader.push(54);  
aHeader.push(0);  
aHeader.push(0);  
aHeader.push(0);  
var aInfoHeader = \[\];  
aInfoHeader.push(40);  
aInfoHeader.push(0);  
aInfoHeader.push(0);  
aInfoHeader.push(0);  
var iImageWidth = iWidth;  
aInfoHeader.push(iImageWidth % 256);  
iImageWidth = Math.floor(iImageWidth / 256);  
aInfoHeader.push(iImageWidth % 256);  
iImageWidth = Math.floor(iImageWidth / 256);  
aInfoHeader.push(iImageWidth % 256);  
iImageWidth = Math.floor(iImageWidth / 256);  
aInfoHeader.push(iImageWidth % 256);  
var iImageHeight = iHeight;  
aInfoHeader.push(iImageHeight % 256);  
iImageHeight = Math.floor(iImageHeight / 256);  
aInfoHeader.push(iImageHeight % 256);  
iImageHeight = Math.floor(iImageHeight / 256);  
aInfoHeader.push(iImageHeight % 256);  
iImageHeight = Math.floor(iImageHeight / 256);  
aInfoHeader.push(iImageHeight % 256);  
aInfoHeader.push(1);  
aInfoHeader.push(0);  
aInfoHeader.push(24);  
aInfoHeader.push(0);  
aInfoHeader.push(0);  
aInfoHeader.push(0);  
aInfoHeader.push(0);  
aInfoHeader.push(0);  
var iDataSize = iWidth \* iHeight \* 3;  
aInfoHeader.push(iDataSize % 256);  
iDataSize = Math.floor(iDataSize / 256);  
aInfoHeader.push(iDataSize % 256);  
iDataSize = Math.floor(iDataSize / 256);  
aInfoHeader.push(iDataSize % 256);  
iDataSize = Math.floor(iDataSize / 256);  
aInfoHeader.push(iDataSize % 256);  
for (var i = 0; i < 16; i++) \{  
aInfoHeader.push(0);  
\}  
var iPadding = (4 - ((iWidth \* 3) % 4)) % 4;  
var aImgData = oData.data;  
var strPixelData = "";  
var y = iHeight;  
do \{  
var iOffsetY = iWidth \* (y - 1) \* 4;  
var strPixelRow = "";  
for (var x = 0; x < iWidth; x++) \{  
var iOffsetX = 4 \* x;  
strPixelRow += String.fromCharCode(aImgData\[iOffsetY + iOffsetX + 2\]);  
strPixelRow += String.fromCharCode(aImgData\[iOffsetY + iOffsetX + 1\]);  
strPixelRow += String.fromCharCode(aImgData\[iOffsetY + iOffsetX\]);  
\}  
for (var c = 0; c < iPadding; c++) \{  
strPixelRow += String.fromCharCode(0);  
\}  
strPixelData += strPixelRow;  
\} while (--y);  
var strEncoded = encodeData(aHeader.concat(aInfoHeader)) + encodeData(strPixelData);  
return strEncoded;  
\}  
var saveFile = function(strData) \{  
document.location.href = strData;  
\}  
var makeDataURI = function(strData, strMime) \{  
return "data:" + strMime + ";base64," + strData;  
\}  
var makeImageObject = function(strSource) \{  
var oImgElement = document.createElement("img");  
oImgElement.src = strSource;  
return oImgElement;  
\}  
var scaleCanvas = function(oCanvas, iWidth, iHeight) \{  
if (iWidth && iHeight) \{  
var oSaveCanvas = document.createElement("canvas");  
oSaveCanvas.width = iWidth;  
oSaveCanvas.height = iHeight;  
oSaveCanvas.style.width = iWidth + "px";  
oSaveCanvas.style.height = iHeight + "px";  
var oSaveCtx = oSaveCanvas.getContext("2d");  
oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iHeight);  
return oSaveCanvas;  
\}  
return oCanvas;  
\}  
return \{  
saveAsPNG: function(oCanvas, bReturnImg, iWidth, iHeight) \{  
if (!bHasDataURL) \{  
return false;  
\}  
var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);  
var strData = oScaledCanvas.toDataURL("image/png");  
if (bReturnImg) \{  
return makeImageObject(strData);  
\} else \{  
saveFile(strData.replace("image/png", strDownloadMime));  
\}  
return true;  
\},  
saveAsJPEG: function(oCanvas, bReturnImg, iWidth, iHeight) \{  
if (!bHasDataURL) \{  
return false;  
\}  
var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);  
var strMime = "image/jpeg";  
var strData = oScaledCanvas.toDataURL(strMime);  
if (strData.indexOf(strMime) != 5) \{  
return false;  
\}  
if (bReturnImg) \{  
return makeImageObject(strData);  
\} else \{  
saveFile(strData.replace(strMime, strDownloadMime));  
\}  
return true;  
\},  
saveAsBMP: function(oCanvas, bReturnImg, iWidth, iHeight) \{  
if (!(bHasImageData && bHasBase64)) \{  
return false;  
\}  
var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);  
var oData = readCanvasData(oScaledCanvas);  
var strImgData = createBMP(oData);  
if (bReturnImg) \{  
return makeImageObject(makeDataURI(strImgData, "image/bmp"));  
\} else \{  
saveFile(makeDataURI(strImgData, strDownloadMime));  
\}  
return true;  
\}  
\};  
\})();

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas2image.js

var Canvas2Image = (function() \{ var bHasCanvas = false; var oCanvas = document.cre

蔚落/ 2024年02月19日 18:53/ 0 赞/ 61 阅读

相关 html2canvas、canvas2image将HTML网页生成图片

[html2canvas][] [canvas2image][] [参考这个文章][Link 1] [canvas教程][canvas] [html2canvas]

Love The Way You Lie/ 2023年01月18日 12:22/ 0 赞/ 10 阅读

相关 jspdf-html2canvas

打印图片问题 import jspdfHtml2canvas from 'jspdf-html2canvas' jspdfHtml2canvas(htm

一时失言乱红尘/ 2022年12月31日 05:21/ 0 赞/ 174 阅读

相关 html2canvas不能css,html2canvas css overflow have no working

There is a div element, add img Child element with appendChild fun. div overflow is hid

雨点打透心脏的1/2处/ 2022年10月10日 09:27/ 0 赞/ 14 阅读

相关 html2canvas将html内容生成canvas图片实现方式

所实现功能：图片、文字合成一张图，并在H5中下载所生成图片。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

约定不等于承诺〃/ 2022年08月31日 15:24/ 0 赞/ 531 阅读

相关 html元素转canvas并一键生成png图片(支持img图片元素)html2canvas、canvas2image

在做项目的时候遇到一个需要把页面上的一些元素一键转成图片并且可以下载，在这里就做一个简单的介绍，希望可以帮到大家！！需要引入html2canvas.js、canvas2i

╰半夏微凉°/ 2022年06月01日 14:09/ 0 赞/ 222 阅读

相关 ImageJ marco Alpha-Beta Contrast Stretching.

此代码适用于灰度图 width=getWidth(); height=getHeight(); histo=newArray(256); fo

喜欢ヅ旅行/ 2022年04月25日 05:38/ 0 赞/ 112 阅读

相关 imageJ marco threshold自适应阈值

该代码为imageJ marco code 将8bit灰度图片文件导入后可用此代码算出adaptive threshold height=getHeight();

た入场券/ 2022年04月25日 04:42/ 0 赞/ 279 阅读

相关 imageJ marco Histogram Equalization直方图均衡化

imageJ macro灰度图直方图均衡化代码 width=getWidth(); height=getHeight(); histo=newArra

分手后的思念是犯贱/ 2022年02月09日 14:37/ 0 赞/ 387 阅读

相关 ImageJ marco internal gradient

<table style="width:100px;"> <tbody> <tr> <td style="width:50px;"><span style="

今天药忘吃喽~/ 2022年02月09日 08:09/ 0 赞/ 173 阅读