HTML5 canvas 设置背景图

页面代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML5 canvas 设置背景图</title><script src="canvas2image.js"></script></head><body><canvas id="canvaxbox" width="500" height="500"></canvas></body><script>var c = document.getElementById("canvaxbox");var canvas = c.getContext("2d");var img = new Image();img.src = "pg1.JPG";img.onload = imgfn;//图片加载完在执行function imgfn() {var bg = canvas.createPattern(img, "no-repeat");//createPattern() 方法在指定的方向内重复指定的元素。canvas.fillStyle = bg;//fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。canvas.fillRect(0, 0, c.width, c.height);//绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)}</script>
</html>

canvas2image.js代码如下

/*** covert canvas to image* and save the image file*/var Canvas2Image = function () {// check if support sth.var $support = function () {var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');return {canvas: !!ctx,imageData: !!ctx.getImageData,dataURL: !!canvas.toDataURL,btoa: !!window.btoa};}();var downloadMime = 'image/octet-stream';function scaleCanvas (canvas, width, height) {var w = canvas.width,h = canvas.height;if (width == undefined) {width = w;}if (height == undefined) {height = h;}var retCanvas = document.createElement('canvas');var retCtx = retCanvas.getContext('2d');retCanvas.width = width;retCanvas.height = height;retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);return retCanvas;}function getDataURL (canvas, type, width, height) {canvas = scaleCanvas(canvas, width, height);return canvas.toDataURL(type);}function saveFile (strData) {document.location.href = strData;}function genImage(strData) {var img = document.createElement('img');img.src = strData;return img;}function fixType (type) {type = type.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;}function encodeData (data) {if (!window.btoa) { throw 'btoa undefined' }var str = '';if (typeof data == 'string') {str = data;} else {for (var i = 0; i < data.length; i ++) {str += String.fromCharCode(data[i]);}}return btoa(str);}function getImageData (canvas) {var w = canvas.width,h = canvas.height;return canvas.getContext('2d').getImageData(0, 0, w, h);}function makeURI (strData, type) {return 'data:' + type + ';base64,' + strData;}/*** create bitmap image* 按照规则生成图片响应头和响应体*/var genBitmapImage = function (oData) {//// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx//var biWidth  = oData.width;var biHeight   = oData.height;var biSizeImage = biWidth * biHeight * 3;var bfSize  = biSizeImage + 54; // total header size = 54 bytes////  typedef struct tagBITMAPFILEHEADER {//    WORD bfType;//      DWORD bfSize;//     WORD bfReserved1;//     WORD bfReserved2;//     DWORD bfOffBits;//  } BITMAPFILEHEADER;//var BITMAPFILEHEADER = [// WORD bfType -- The file type signature; must be "BM"0x42, 0x4D,// DWORD bfSize -- The size, in bytes, of the bitmap filebfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,// WORD bfReserved1 -- Reserved; must be zero0, 0,// WORD bfReserved2 -- Reserved; must be zero0, 0,// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.54, 0, 0, 0];////  typedef struct tagBITMAPINFOHEADER {//      DWORD biSize;//     LONG  biWidth;//    LONG  biHeight;//   WORD  biPlanes;//   WORD  biBitCount;//     DWORD biCompression;//      DWORD biSizeImage;//    LONG  biXPelsPerMeter;//    LONG  biYPelsPerMeter;//    DWORD biClrUsed;//      DWORD biClrImportant;//  } BITMAPINFOHEADER, *PBITMAPINFOHEADER;//var BITMAPINFOHEADER = [// DWORD biSize -- The number of bytes required by the structure40, 0, 0, 0,// LONG biWidth -- The width of the bitmap, in pixelsbiWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,// LONG biHeight -- The height of the bitmap, in pixelsbiHeight & 0xff, biHeight >> 8  & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,// WORD biPlanes -- The number of planes for the target device. This value must be set to 11, 0,// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap// has a maximum of 2^24 colors (16777216, Truecolor)24, 0,// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed0, 0, 0, 0,// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmapsbiSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,// LONG biXPelsPerMeter, unused0,0,0,0,// LONG biYPelsPerMeter, unused0,0,0,0,// DWORD biClrUsed, the number of color indexes of palette, unused0,0,0,0,// DWORD biClrImportant, unused0,0,0,0];var iPadding = (4 - ((biWidth * 3) % 4)) % 4;var aImgData = oData.data;var strPixelData = '';var biWidth4 = biWidth<<2;var y = biHeight;var fromCharCode = String.fromCharCode;do {var iOffsetY = biWidth4*(y-1);var strPixelRow = '';for (var x = 0; x < biWidth; x++) {var iOffsetX = x<<2;strPixelRow += fromCharCode(aImgData[iOffsetY+iOffsetX+2]) +fromCharCode(aImgData[iOffsetY+iOffsetX+1]) +fromCharCode(aImgData[iOffsetY+iOffsetX]);}for (var c = 0; c < iPadding; c++) {strPixelRow += String.fromCharCode(0);}strPixelData += strPixelRow;} while (--y);var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);return strEncoded;};/*** saveAsImage* @param canvasElement* @param {String} image type* @param {Number} [optional] png width* @param {Number} [optional] png height*/var saveAsImage = function (canvas, width, height, type) {if ($support.canvas && $support.dataURL) {if (typeof canvas == "string") { canvas = document.getElementById(canvas); }if (type == undefined) { type = 'png'; }type = fixType(type);if (/bmp/.test(type)) {var data = getImageData(scaleCanvas(canvas, width, height));var strData = genBitmapImage(data);saveFile(makeURI(strData, downloadMime));} else {var strData = getDataURL(canvas, type, width, height);saveFile(strData.replace(type, downloadMime));}}};var convertToImage = function (canvas, width, height, type) {if ($support.canvas && $support.dataURL) {if (typeof canvas == "string") { canvas = document.getElementById(canvas); }if (type == undefined) { type = 'png'; }type = fixType(type);if (/bmp/.test(type)) {var data = getImageData(scaleCanvas(canvas, width, height));var strData = genBitmapImage(data);return genImage(makeURI(strData, 'image/bmp'));} else {var strData = getDataURL(canvas, type, width, height);return genImage(strData);}}};return {saveAsImage: saveAsImage,saveAsPNG: function (canvas, width, height) {return saveAsImage(canvas, width, height, 'png');},saveAsJPEG: function (canvas, width, height) {return saveAsImage(canvas, width, height, 'jpeg');},saveAsGIF: function (canvas, width, height) {return saveAsImage(canvas, width, height, 'gif');},saveAsBMP: function (canvas, width, height) {return saveAsImage(canvas, width, height, 'bmp');},convertToImage: convertToImage,convertToPNG: function (canvas, width, height) {return convertToImage(canvas, width, height, 'png');},convertToJPEG: function (canvas, width, height) {return convertToImage(canvas, width, height, 'jpeg');},convertToGIF: function (canvas, width, height) {return convertToImage(canvas, width, height, 'gif');},convertToBMP: function (canvas, width, height) {return convertToImage(canvas, width, height, 'bmp');}};}();

HTML5 canvas 设置背景图相关推荐

设置背景图时防止图片拉伸的解决方法
在设置背景图时,如果图片不够大会被拉伸,使图片失真,如果图片太大会对view控件的显示造成影响. 如果只是在ImageView中设置图片的话,在程式中可以利用setScaleType进行动态设定,在x ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
使用 XML 实现按钮改变焦点设置背景图
在 drawable 文件夹中添加一个 advancedbutton.xml 设置<selector>和 <item>标签 <?xml version="1.0 ...
python中mainloop添加背景_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
从0开始html前端页面开发_CSS实现设置背景图自适应屏幕大小
只需要在css样式里对BODY元素添加css样式即可 html代码如下 <STYLE TYPE="text/css"> BODY {background-image: ...
QT上设置背景图不影响子控件以及按钮控件的透明化
QT中设置背景图不影响子控件 QT中设置背景图的方法不少,我这里是直接使用stylesheet来设置背景图.如果直接在UI界面进行如下所示设置 border-image: url(:/resource ...
python设置背景图片大全_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
python中mainloop添加背景_Python实例讲解 tkinter canvas (设置背景图片及文字)
Python实例讲解 tkinter canvas (设置背景图片及文字) 2018-09-14 Python实例讲解 -- tkinter canvas (设置背景图片及文字) 博客分类:Pytho ...

HTML5 canvas 设置背景图

HTML5 canvas 设置背景图相关推荐

最新文章

热门文章