HTML过滤,如何过滤图片中的style,width,height

HTML过滤,如何过滤图片中的style,width,height,第1张

reg =/(<IMG) .*?(src=.*)\b.*?(board=\d+)(>)/i

reg.exec(source)

ret=RegExp.$1+RegExp.$2+RegExp.$3+RegExp.$4

请参照以下代码

public static string FilterHtmlTag(string s)

{

//<...>标记正则表达式

return Regex.Replace(s, @"<[^>]*>", delegate(Match match)

{

string v = match.ToString()

//图片,<p>,<br>正则表达式

Regex rx = new Regex(@"^<(p|br|img.*)>$",

RegexOptions.Compiled | RegexOptions.IgnoreCase)//

if (rx.IsMatch(v))

{

return v//保留图片,<p>,<br>

}

else

{

return ""//过滤掉

}

})

}

1、CSS Filter

使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。

现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox、Chrome和Safari。以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。

添加如下CSS样式可以将图像变成灰色

代码如下:

img {

-webkit-filter: grayscale(1)/* Webkit */

filter:gray/* IE6-9 */

filter: grayscale(1)/* W3C */

}

支持IE6-9和Webkit浏览器(Chrome 18+, Safari 6.0+, and Opera 15+)

(注意:这段代码在Firefox上无效果。)

2、Javascript

第二种方法是通过使用JavaScript技术上应该支持所有JavaScript的浏览器,包括IE6以下

代码来自Ajax Blender.

代码如下:

varimgObj = document.getElementById('js-image')

functiongray(imgObj) {

varcanvas = document.createElement('canvas')

varcanvasContext = canvas.getContext('2d')

varimgW = imgObj.width

varimgH = imgObj.height

canvas.width = imgW

canvas.height = imgH

canvasContext.drawImage(imgObj, 0, 0)

varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH)

for(vary = 0y <imgPixels.heighty++){

for(varx = 0x <imgPixels.widthx++){

vari = (y * 4) * imgPixels.width + x * 4

varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3

imgPixels.data[i] = avg

imgPixels.data[i + 1] = avg

imgPixels.data[i + 2] = avg

}

}

canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height)

returncanvas.toDataURL()

}

imgObj.src = gray(imgObj)

3、SVG

第三种方法来自SVG Filter.,你需要创建一个SVG文件,并将以下代码写在里面,保存命名为***.svg

代码如下:

<svgxm .w3.org/2000/svg">

<filterid="grayscale">

<feColorMatrixtype="matrix"values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>

</filter>

</svg>

然后利用过滤器的属性,我们可以通过SVG文件中的元素的ID连接SVG文件

[code]

img {

filter:url('img/gray.svg#grayscale')

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7223433.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存