html5图片处理,html对图片的处理

html5的canvas怎么调整画图的清晰度？

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。\x0d\x0a首先，引入上方这个polyfill;\x0d\x0a然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法\x0d\x0a \x0d\x0avar getPixelRatio = function(context) {\x0d\x0a var backingStore = context.backingStorePixelRatio ||\x0d\x0a context.webkitBackingStorePixelRatio ||\x0d\x0a context.mozBackingStorePixelRatio ||\x0d\x0a context.msBackingStorePixelRatio ||\x0d\x0a context.oBackingStorePixelRatio ||\x0d\x0a context.backingStorePixelRatio || 1;\x0d\x0a return (window.devicePixelRatio || 1) / backingStore;\x0d\x0a};\x0d\x0a \x0d\x0a//调用\x0d\x0avar ratio = getPixelRatio(ctx);\x0d\x0a\x0d\x0a之后，在调用ctx.drawImage()的时候，给width和height乘以ratio，如下：\x0d\x0a\x0d\x0a1\x0d\x0a \x0d\x0actx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);

目前创新互联公司已为1000多家的企业提供了网站建设、域名、网络空间、网站托管维护、企业网站设计、雨花台网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

【HTML5】图片灰度化

function onStart() {

var canvas = document.getElementByIdx_x_x_x_x_x_x("lesson01");

if(canvas.getContext)

{

var context = canvas.getContext("2d");

var pic = new Image();

pic.onload=function(){

context.drawImage(pic,0, 0);

}

pic.src = "";

}

}

下面写一个例子关于利用canvas实现图片变灰的code.

html

head

script

window.onload = function () {

var canvas = document.getElementByIdx_x_x_x("myCanvas");

var image = document.getElementByIdx_x_x_x("imageSource");

// 将图片的高宽赋值给画布

canvas.width = image.width;

canvas.height = image.height;

// 获得二维渲染上下文

if (canvas.getContext) {//为了安全起见，先判断浏览器是否支持canvas

var context = canvas.getContext("2d");

context.drawImage(image, 0, 0);//将得到的image图像绘制在canvas对象中

var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);//返回ImageData对象

alert(canvasData.width.toString());

alert(canvasData.height.toString());

// 填充灰色【读取像素值和实现灰度计算】

for (var x = 0; x canvasData.width; x++) {

for (var y = 0; y canvasData.height; y++) {

// Index of the pixel in the array

var idx = (x + y * canvasData.width) * 4;

var r = canvasData.data[idx + 0];

var g = canvasData.data[idx + 1];

var b = canvasData.data[idx + 2];

// 灰度的计算

var gray = .299 * r + .587 * g + .114 * b;

// assign gray scale value

canvasData.data[idx + 0] = gray; // Red channel

canvasData.data[idx + 1] = gray; // Green channel

canvasData.data[idx + 2] = gray; // Blue channel

canvasData.data[idx + 3] = 255; // Alpha channel

// 新增黑色边框

if (x 8 || y 8 || x (canvasData.width - 8) || y (canvasData.height - 8)) {

canvasData.data[idx + 0] = 0;

canvasData.data[idx + 1] = 0;

canvasData.data[idx + 2] = 0;

}

}

}

context.putImageData(canvasData, 0, 0); // 处理完成的数据重新载入到canvas二维对象中

} else {

alert("your browser does not support canvas!");

}

}

/script

/head

body

h2Hello World!/h2

img id="imageSource" src="1.jpg" alt="Canvas Source" /

canvas id="myCanvas" Gray Filter/canvas

/body

/html

html5怎么压缩图片

HTML是用来做网站的一种语言哈，就是在html里面改变图片的大小就要改变文件代码，打开图片源代码，图片文件的大小是height，和宽，我们可以更改，在语言中我们需要设置的都是英文的。

现在压缩工具将图片缩小之后都会对画质有影响，压缩图片文件选择压缩工具页面中的普通压缩就可以了压缩程度不要过大，找到图片压缩工具，图片要放置在工具页面上进行数据分析，根据图片的大小工具会制定压缩方案。

图片分享论坛却只允许发几百KB的文件；微信、分享给朋友的时候自动压缩的图像都比较模糊

HTML5中，如何为图片制作放大镜效果？

制作图片的放大效果我考虑到的方法是将原始图片绘制到canvas上，然后在对canvas进行局部裁剪最后对裁剪的部分进行放大，这样就可以实现放大镜的效果。

这里我给出一个实现这个想法的示例。该示例实际上就是运用HTML5 canvas中对画布进行裁剪与保存画布状态的相关知识实现的。

上面是给出示例的效果图。这是不是你想要的放大镜效果呢？

下面我们来看下示例代码：在这个示例中当你点击图片时图片就会出现上图效果，再一次点击时就变成原始图片了。

!DOCTYPE html

html

head

meta charset="utf-8"

title放大镜/title

!—HTML代码设计：一个简单的canvas元素--

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的浏览器不支持canvas元素/p

/canvas

/div

script

window.onload=function() {

//获取canvas对象以及图片对象

var

canvas = document.getElementById('canvas'),

img = new Image(),

context = null,

dataUrl = null,

//设置一个标记，该标记的作用是控制我们点击canvas时放大镜效果的消失和出现

isMagnified = false,

//init函数只要是在图片加载时绘制出图形

init = function() {

img.onload = function() {

//绘制原始图片

context.drawImage(img, 0, 0);

//将图片信息转化为二进制信息或者URL信息存储在dataUrl中方便后面调用

dataUrl = canvas.toDataURL();

}

img.src = 'fist-pump-baby.jpg';

//设置标记值

isMagnified = false;

},

//magnify函数的作用是绘制具有放大镜效果的图形

magnify = function() {

//保存当前画布的绘制状态即画布绘制原始图片的状态。方便我们在后面恢复到绘制原始图片的状态

context.save();

//因为放大镜的圆圈和把手是通过canvas绘制的这里设置了一些绘制把手和圆圈的样式属性。

context.lineWidth = 10;// 线条宽度

context.shadowColor = '#000';// 阴影的颜色黑色

context.shadowBlur = 15;// 模糊级别为15

context.shadowOffsetX = 5;// 形状与阴影的水平距离5

context.shadowOffsetY = 5;// 形状与阴影的垂直距离5

//保存画布当前状态即我们设置阴影属性后的状态方便后面使用

context.save();

//绘制出放大镜把手的图形

context.beginPath();

context.moveTo(230, 230);

context.lineCap = 'round';

context.lineWidth = 30;

context.lineTo(285, 285);

context.stroke();

//对图片进行裁剪，裁剪出的图形是一个圆形。

context.beginPath();

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.clip();

//创建一个新的Image对象，这个Image对象的图片资源是前面存储在dataUrl中的图片资源。所以这个Image对象和之前初始化的Image对象是完全一样的。

var magnified = new Image();

magnified.src = dataUrl;

//对Image对象进行放大1.5倍，并进行绘制。注意此时的画布状态时裁剪为一个圆形的状态，所以这里绘制的也仅仅是图片中的一个圆形区域。这里为了绘制出图片中娃娃的脸设置了绘制的图片有一定的偏移量。

context.scale(1.5, 1.5);

context.drawImage(img, -40, -40);

//调用restore()函数将画布状态恢复到绘制把放大镜把手时的状态，即具有阴影属性

context.restore();

//绘制放大镜的圆圈，即绘制刚刚我们裁剪出来图片的边框。这样刚刚裁剪出来的圆形图形就会正好处于放大镜的圆圈中。

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.stroke();

//重置画布，将画布恢复到绘制元素图片的状态，以方便绘制出放大效果后，再次点击是绘制原始图片。

context.restore()；

//设置标记值，实现点击后放大效果消失。

isMagnified = true;

};

//加载初始化代码，即当运行页面时会在页面绘制出一个原始图像

init();

//监听画布的点击事件，当点击页面的图像时会根据标记的值来进行判断是否对画布进行方大处理

$('canvas').click(function() {

if (isMagnified) {

init();//绘制原始图像

}

else {

magnify();//绘制放大的图像

}

});

}

/script

script src="jquery.js"/script

/body

/html

对于这些知识在一个叫秒秒学的教程网站上有相关的学习资料，有兴趣的可以自己去看看，希望对你有帮助。

html5 怎么让图片自适应？

html5中是通过css3的background-size来控制自适应的。

直接在图片代码里面设置style，例如img src="xxx.jpg" style="max-width:100%;"/2、要么给图片统一一个class名例如response-img，然后在css文件里面设置这个class

html5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容）

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

html5和js如何改变图片的亮度

首先，您说的亮度应该是图片透明度。

图片透明度调整很简单，只要在图片的属性中加上{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}；

opacity是最重要的，因为它是CSS透明的标准属性，取值范围在0-1之间，目前支持的浏览器有：

Firefox、Chrome、Opera、Safari。（也就是说，除了IE，它支持所有主流浏览器）；

filter:alpha(opacity=50);是专门给IE设定的属性，取值的范围在0-100之间；

-moz-opacity是为了兼容一些老版本的Mozilla浏览器，取值范围在0-1之间；

-khtml-opacity是为了兼容一些老版本的Safari浏览器，取值范围在0-1之间。