html5图片编辑,h5图片编辑器

html5设置图片自适应屏幕宽度

HTML网页的开发中，需要对大小不一的屏幕兼容，使图片在不同的设备中可以展示预期的效果。自适应屏幕的宽度，利用css中background属性可以实现

工具/材料

浏览器，文本编辑器

01

新建一个HTML文件，代码如下图

02

打开HTML文件所在的文件夹，双击文件，跳转到浏览器

03

改变浏览器大小，发现图片没有变化，显示不全

04

在所在文件夹下，新建一个样式文件，命名为 auto.css，代码如下

05

在HTML文件中加上对样式文件的引用，返回文件夹，双击HTML文件，发现浏览器的变化会引着图片一起变化，自适应屏幕的大小

相关问答

Q1: HTML5图片导入和编辑功能的实现

让用户在画板上拖拽、缩放、多图组合操作的话，需要用到Canvas或者SVG的编程，给元素绑定拖拽等鼠标事件

Q2: html5图片转canvas后调整色温、饱和度.

这个比较复杂，我说几个要点。

首先是把图像写入canvas

var canvas = document.getElementById("canvas");

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

var img = document.getElementById("image");

var w = img.width, h = img.height;

cts.drawImage(img, 0, 0);

然后获取canvas上每个像素点的rgba值

var data = cts.getImageData(0, 0, w, h);

var pixel = [];

for (var i = 0; i  data / 4; i += 1) {

    pixel.push(data.slice(4 * i, 4 * (i + 1)));

}

然后你就可以对pixel数组操作了。其中的4项分别是R，G，B，A。

使用色温和饱和度的计算公式就可以调整了。

调整完成之后，再写入canvas

cts.putImageData([].concat.apply([], pixel), 0, 0);

然后，你爱save就save，随你啦。

Q3: 如何编写html5改变某一个区域的颜色和图片中的某一点相同？

您好！根据我对你描述的问题，我是这样理解的。

代码（html5中）背景颜色——更换成图片上的某点的颜色。

我的回答是：把图片放入到图片编辑软件（例如：PS）中，单击 颜色块

     弹出一个拾色器。复制红色框框中的颜色值，粘贴到html5中即可。（例如：background:#c62013;）

Q4: html5怎么设置整页背景图片

html5加背景图片可以通过：

1.首先可以去写一个div，然后这个div当然宽高是一定要有，然后在div中去设置要的背景图片，是否重复等属性，repaet这个来设置，no-repeat(是不重复)、repeat-x（沿着x轴重复）、repeat-y（沿着Y轴重复）这里我提交一段代码：

div id = 'test'/div

style

#test{

width：300px;

height:400px;

background:url('图片的地址')no-repeat;

}

/style

这样背景图片就设置好了！

Q5: html5怎么在图片上加文字

把图片设置为背景图片，然后加上文字就可以了

style

.img1{

width:200px;

height:200px;

background-image:url("img/1.jpg");

}

/style

div class="img1"图片加文字/div