一、如何使用js将canvas自定义文件名

1、从canvas中直接提取图片元数据

// 图片导出为 png 格式

var type = 'png';

var imgData = canvas.toDataURL(type);

上面的代码得到的数据格式为：data:image/png;base64,.....

2、将mime-type改为image/octet-stream，强制让浏览器直接download

/**

* 获取mimeType

* @param {String} type the old mime-type

* @return the new mime-type

*/

var _fixType = function(type) {

type = type.toLowerCase().replace(/jpg/i, 'jpeg');

二、如何通过canvas进行简单的图像识别

1、获取canvas调用

var c = document.createElement('canvas');

context = c.getContext('2d');

2、获取导入图像信息

var hiddenImage = new Image();

hiddenImage.src=图片地址

context .drawImage(hiddenImage, 0, 0, width, height);

hiddenImage .onload=function(){

context.putImageData(hiddenImage, 0, 0);

}

3、获取图片的像素信息

var imageData = context.getImageData(0, 0, w, h);

//注意这个获取的是数组，注意每1个像素由数组的4个元素组成，四个元素分别代码四个通道r/g/b/a的值

for(var j=0;jfor(var i=0;i //注意这里获取图片信息后可以进行定制化处理 offset=4*(hiddenImage.width*j+i); var red = sourceImageData[offset]; var green = sourceImageData[offset + 1]; var blue = sourceImageData[offset + 2]; var brightness = getBrightness(red,green,b

三、如何使用canvas实现多个随机圆运动

此段代码使用canvas画布实现多个圆形自上向下滑落，圆的大小及颜色随机，背景图片可根据自己的喜好更换，只需将大小与画布大小统一即可。

文章下附有效果图

var canvas=document.getElementById(canvas);//获取元素

var context=canvas.getContext(2d);//创建画布对象

//创建构造函数Circle

function Circle(){

this.x=Math.random()*canvas.width;//在画布内随机生成x值

//随机生成三原色

this.r1 = Math.floor(Math.random()*256);

this.g = Math.floor(Math.random()*256);

this.b = Math.floor(Math.random()*256);

this.y=-10;

this.r=Math.random()*14;//随机半径r

// 绘制圆形的方法

this.paint=function(){

context.beginPath();

context.globalAlpha = 0.7;//设置透明度

context.strokeStyle=rgb(+this.r1+,+this.g+,+this.b+);//将随机生成的三原色设为圆形的颜色

context.arc(this.x,this.y,this.r,0,Math.PI*2);//绘制圆形

context.stroke();

}

// 控制圆形移动的方法

this.step=function(){

this.y++

}

}

var circles=[];

// 创建圆形对象

function createCircles(){

var circle=new Circle();//调用构造函数

circles[circles.length]=circle;//将绘制的图形追加到数组

}

// 绘制所有圆形

function paintCircles(){

for(var i=0;icircles[i].paint();//遍历数组，将数组内的图形绘制

}

}

// 控制所有圆形运动

function stepCircles(){

for(var i=0;icircles[i].step();

}

}

//绘制一张图片

var myimg=new Image();

myimg.src=bgg.jpg;

var time=0;

//设置定时器

setInterval(function(){

context.drawImage(myimg,0,0);

time++;//控制绘制时间

if(time%20==0){

createCircles();

}

paintCircles();

stepCircles();

},50);

转载请注明：亿家范文网 » 如何使用js将canvas自定义文件名