解决方案海报-canva绘制海报01：canvas绘制图片并解决导出后略模糊问题

解决方案有两种:方案一:将图片“存储为Web所有格式”,格式“JPEG”,品质“100”,导出的图片小了很多。

但是,此方案只能导出JPEG图片,如果格式要求PNG,需尝试下面的方案二。

方案二:

(1)用Photoshop打开被撑大的psd。同时Ctrl+N新建一个PS文档,尺寸、分辨率与被撑大的文档保持一致。

(2)在被撑大的PS文档中,选中你需要的图层,右键点击“复制图层”。

(3)在“复制图层”弹出框中,“目标”选择刚刚新建的文档。

(4)回到刚刚新建的PS文档,发现图层已经复制过来了。此时再存储为PNG,大小恢复正常。

一般情况下,我们用PS软件处理完图片后,直接点击保存,或是另存为某途径。

假设图片保存为:jpeg或jpg,在弹出的对话框中,选择保存品质,比如,最佳。

保存完成,我们转到保存图片的位置。看下图片的大小是多少。鼠标放在图片名称上,下方弹出

提示语

,显示大小为:249KB。

如果记得太大了,不是自己想要的。可以在“品质”上做文章。修改品质参数。

比如,把“最佳”的品质改为“中”。点击确定后,我们再来看下图片的大小。图片大小已改为:109KB。

图片大小确实是调小了,但代价是图片的品质降低了。我们在保存图片时,选择:储存为web所有格式。

然后,弹出的操作界面中,设置品质是最佳。点击储存,之后我们再看下此图片的大小。

图片大小是:182KB。同样的品质为“最佳”,直接保存图片的大小是249KB,而用“储存为web所有格式”保存,图片大小是:182KB。

如果按自己的要求来自定义图片内存大小,则操作如下:在保存图片是,要选择“储存为web所有格式”。

在弹出的操作界面中,在界面的右上角,可以看到有一个不怎么显眼的小三角,这是优化菜单的按钮。

鼠标点击此按钮,弹出菜单,我们点击:优化文件大小点击“优化文件大小”后,弹出的对话框中在所需文件大小这里输入数字,比如100K(K=KB),再点击确定并保存。

此时,打开图片属性,可以看到,图片的内存是:100KB;图片大小是:97.9KB,达成想要的目标即可。

问题描述:

PS软件可以处理很多图片和文字,海报上面的文字可以处理的很好看,现在介绍用PS制作简单的海报文字,文字的效果是水晶字效果。

解决方案:

1.

建议将前景色设置为R/G/B=164/240/238,然后输入文字。

2.

复制文字图层,得到一个文字图层的副本。对副本图层添加图层样式,首先设置投影,具体参数看图识字。

3.

继续对副本添加渐变叠加:打开渐变编辑器,设置渐变参数,该渐变条一共用到四种颜色,颜色值与色标的位置,从左到右分别如下图。

4.

接下来,将副本图层按键盘上的方向键,向下移动2个像素。

5.

将下面的那个原始文字图层再复制一个,得到副本2,拖到所有图层的最上方,不会托的用手按:Ctrl+Shift+]

再把字体颜色更改成黑色。降低不透明度50%。

6.

主题部分基本收工,接下来就是阴影了。按Ctrl

键,依次单击3个文字图层,按Ctrl+Alt+E将这3个图层合并到一个新层,命名为“阴影”,将“阴影”移动到3个文字图层的最下方,也就是背景层的上放。

7.

接下来滤镜出场,想想还是“动感模糊”比较合适,选中“阴影”图层,将前景色设置为黑色,按Alt+Shift+Delete,将“阴影”图层颜色替换为黑色。

8.

使用70直径的柔角橡皮擦工具,擦掉阴影的上半部。

9.

复制两次“阴影”图层,以加重阴影效果。

10.将文字副本2向下移动一个像素,效果如图。

11.到此,文字效果制作完毕,现在背景是纯白色的。想要对背景做点什么,既然要个性,可以发挥想象。

注意事项:

第七步之后的操作还要执行:滤镜——模糊——动感模糊。角度90,距离50。

另外,

img 标签和 js 中的image 都建议增加 crossorigin = "anonymous" 属性

**注意: **有部分网友评论('crossOrigin', 'anonymous') 必须是写 在你赋值 之前,所以楼主写法有误 可以看看这个链接 去看看, #27260385

效果图如下:

模糊在线demo

解决方案:

1.首先一样,获取 Canvas 对象:

2.获取像素比,将 Canvas 宽高进行放大,放大比例为:devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。

3.按实际渲染倍率来缩放canvas。

注意基础知识点:

要设置canvas的画布大小,使用的是 和 ;

要设置画布的实际渲染大小,使用的 style 属性或CSS设置的 width 和height,只是简单的对画布进行缩放。

4.绘制

效果图如下

优化后不模糊的在线demo

参考链接:

一个关于image访问图片跨域的问题,

解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported,

解决 canvas 在高清屏中绘制模糊的问题,