草庐IT

image-transcoding

全部标签

javascript - HTML5 Canvas : image resizing

我正在尝试将图像放置在Canvas上而不调整其大小。我认为drawImage(img,x,y)可以解决问题,但它会拉伸(stretch)图像以填充Canvas。另外,为drawImage(img,x,y,width,height)提供我的图像尺寸似乎不起作用。这是我的代码:window.onload=function(){varcanvas=document.getElementById("story");varcontext=canvas.getContext("2d");varimg=document.getElementById("img1");varwidth=parseInt

javascript - 如何绑定(bind) CSS background-image 属性?

是否可以制作样式背景图像绑定(bind)?我试过这段代码:sometext我也试过backgroundImage,url没有引号,url后没有:,但还是不行在职的。所有其他绑定(bind),例如color或backgroundColor绑定(bind)都运行良好。 最佳答案 如documentation中所述,您需要使用您想要控制的样式的Javascript名称。这意味着您必须使用backgroundImage而不是background-image。像这样:sometext 关于java

javascript - HTML5 Canvas : How to make a loading spinner by rotating the image in degrees?

我正在用html5Canvas制作一个加载微调器。我在Canvas上有我的图形,但是当我旋转它时,图像会旋转离开Canvas。我如何告诉它在其中心点旋转图形?Canvastestwindow.onload=function(){vardrawingCanvas=document.getElementById('myDrawing');//ChecktheelementisintheDOMandthebrowsersupportscanvasif(drawingCanvas&&drawingCanvas.getContext){//Initaliasea2-dimensionaldraw

image - 内部带有 img 标签的 div 高度错误

这个问题在这里已经有了答案:Imageinsidedivhasextraspacebelowtheimage(10个答案)关闭3年前。我有一个div,里面有一个图片标签,div的高度看起来比图片大一点。我可以通过为div设置特定高度(与图像相同)来解决这个问题,但我正在使用响应式布局,我不想为div设置特定高度,所以当浏览器窗口缩放时(例如在移动设备中),div将缩放并保持比例。我需要div高度与图像高度完全相同。这是场景:CSS是:img{height:auto;max-width:100%;width:auto;}有人知道如何解决这个问题吗?

html - HTML 中的 <img> 与 <image> 标签

我正在编写介绍性HTML类(class)。我记得9年前我在学习HTML时发现和用作显示图像的标签,至少在IE中是这样。事实上,仍然适用于5个顶级浏览器的最新版本。我意识到不正确,不会用http://validator.w3.org验证.然而,有没有人知道浏览器如果将不显示图像?使用而不是?此外,我假设现代浏览器显示使用创建的图像标记只是因为这是初学者常犯的错误。这个假设是否正确? 最佳答案 是也不是。正如你指出的一直是的同义词需很长时间。我相信是早期的Netscape浏览器首先这样做,可能是为了补偿用户错误,或者可能是因为当时对该元

html - text-indent 是 : -9999px a bad technique for replacing text with images, 吗?有哪些替代方案?

Thisarticle说我们应该避免使用这种技术。Thisone说它很棒。Google在CSS文件中查找text-indent:-9999px;是真的吗?并惩罚你?:|我经常使用该属性来隐藏文本。例如,我有一个用图标表示的按钮:doStuffCSS:.mybutton{text-indent:-9999px;background:transparenturl(images/SpriteWithButtons.png)no-repeat20px20px;display:block;width:16px;height:16px;}我看不到我的代码有任何替代方案。如果我用图像替换它,我会自动

image - 在 HTML5 中使用 <picture> <figure> 元素?

在HTML5中我们目前有一个元素,像这样定义(W3Creference)Thefigureelementrepresentsaunitofcontent,optionallywithacaption,thatisself-contained,thatistypicallyreferencedasasingleunitfromthemainflowofthedocument,andthatcanbemovedawayfromthemainflowofthedocumentwithoutaffectingthedocument’smeaning.最近一个新元素由ResponsiveImag

html - 无法修复 : 'og:image' property should be explicitly provided,,即使可以从其他标签推断出一个值

我有一个网站,当点击Facebook上共享的链接时会触发警告。警告说:PossibleproblemwiththislinkWehavedetectedthatthislink:http://www.example.online/maybemalicious.Tokeepyouraccountanddevicesecure,onlyfollowlinksyoutrust."我运行了Facebook调试工具,但收到以下错误消息:InferredPropertyTheog:imagepropertyshouldbeexplicitlyprovided,evenifavaluecanbein

html - Bootstrap 3 : Text overlay on image

我正在使用bootstrap3缩略图,如下所示:Robots!Loremipsumdolorsitamet我希望caption覆盖在图像上,但是在Mashable.com上完成的方式我试过跟随但没有成功:((.post-content{background:nonerepeatscroll00#FFFFFF;opacity:0.5;margin:-54px20px12px;position:relative;}如何在图像顶部叠加一个captiondiv,但就像(Mashable.com)一样?这可行,但我希望它像Mashable一样居中。并以每张图片为中心。对于某些图像,它没有居中。

html - flex 盒/IE11 : flex-wrap: wrap does not wrap (Images + Codepen inside)

我创建了一个包含社交图标的列表。这些图标应该环绕在小屏幕上。我使用flex-wrap:wrap;它在Firefox和Chrome中完美运行:但是InternetExplorer11(和IE10)不会打破这条线:代码笔示例在此处查看代码:http://codepen.io/dash/pen/PqOJrGHTML代码CSS代码body{background:#000;}div{background:rgba(255,255,255,.06);display:table;padding:15px;margin:50pxauto0;}ul{display:-webkit-flex;displa