提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS滤镜和夹杂形式处置惩罚的图片怎样上传下载?【css教程】,CSS

一、运用CSS滤镜和夹杂形式在线PS(引荐进修:CSS视频教程)

运用CSS滤镜和夹杂形式能够完成林林总总的图象处置惩罚结果,比方CSSgram项目,内置浩瀚图象处置惩罚结果,部份结果表示以下缩略图:

进入demo页面你也能够点击这里的按钮,替换你当地的素材,检察对应的图象结果:

显现的结果虽好,然则也带来别的一个题目,虽然视觉上是已处置惩罚后的图片,然则假如我们右键-图片另存为,会发明照样原图。

假如用户以为某个图片处置惩罚后的结果很棒,想要保存到本身的本机,就会受阻。

或者说,我们基于CSS滤镜和夹杂形式制作了一款图象处置惩罚的东西,末了须要把这些已处置惩罚好的图片上传到背景,作为一个自力的<img>元素运用,也会受阻。

怎么办?岂非我们要摒弃这么好的特征,还运用canvas来处置惩罚图象吗?

不须要的,实际上是有要领能够获得CSS处置惩罚后的图象的。

二、SVG foreignObject元素与视觉存储

SVG中有个<foreignObject>元素,能够完成在SVG内部嵌入XHTML元素,比方:

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="120" height="50">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>笔墨。</p>
      </body>
    </foreignObject>
</svg>

而SVG实质上就是个图象,也就是说,我们只须要把图象处置惩罚相干的HTML代码和CSS代码放在<foreignObject>元素中,然后作为<img>图象显现,然后再绘制到canvas画布上,如许就能够获得纯粹的处置惩罚后的位图图象了。

demo页面末了一张图片和CSS处置惩罚后的图片长相虽同,然则实质却差别,一个照样原始图(尝尝右键-另存为),一个实质上是合成图(尝尝右键-另存为),以下截图表示:

因而,接下来,无论是是要下载到本机照样上传到服务器都不是题目。

关于纯前端下载图片,能够参考我之前这篇文章:“JS前端建立html或json文件并下载”的part3部份。

关于上传,能够传输图象canvas.toDataURL()的base64数据,也能够传输canvas.toBlob()的Blob数据:

// canvas转为blob并上传canvas.toBlob(function (blob) {    // 图片ajax上传
    var xhr = new XMLHttpRequest();    // 文件上传胜利
    xhr.onload = function() {
         // xhr.responseText就是返回的数据
    };    // 最先上传
    xhr.open("POST", 'upload.php', true);
    xhr.send(blob);    
}, 'image/jpeg');

三、我该如安在项目中运用?

上面的demo页面中,我写了个名为cssRenderImage2PureImage()的要领,能够把相似下面代码构造的CSS图象处置惩罚结果变成一张图片:

<div id="input" class="clarendon-filter">
    <img src="./example.jpg">
</div>
.clarendon-filter {
    filter: contrast(1.2) saturate(1.35);
    display: inline-block;
    position: relative;
}
.clarendon-filter::before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0; left: 0;
    position: absolute;
    background: rgba(127,187,227,.2);
    mix-blend-mode: overlay;
    pointer-events: none;
}

cssRenderImage2PureImage()要领语法:

cssRenderImage2PureImage(dom, callback);

个中:

dom必需参数。DOM对象。callback可选参数。Function。回调要领,支撑一个参数,为合成后的图片的base64信息。

示例:

cssRenderImage2PureImage(input, function (url) {    // url就是合成后的图片base64地点
    // 你能够对url做你任何你想做的事变……});

四、别的申明以及结束语

cssRenderImage2PureImage要领高度定制,假如你的CSS滤镜处置惩罚的DOM构造有所差别,你须要依据你的项目场景调解下cssRenderImage2PureImage要领内里的代码;

<foreignObject>元素是有名的html2canvas东西的中心,一般一些小的部分的截图功用,我们直接本身撸十几行代码处置惩罚下就好了,更高效更天真。

此手艺完成请在Chrome浏览器下游玩。

以上就是CSS滤镜和夹杂形式处置惩罚的图片怎样上传下载?的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS滤镜和夹杂形式处置惩罚的图片怎样上传下载?【css教程】,CSS"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线