急！淘宝店做全屏海报必须要要订购CSS功能吗？

html-css019

急！淘宝店做全屏海报必须要要订购CSS功能吗？,第1张

不用CSS功能，直接调用那个绝对定位的class即可

footer-more-trigger

可以参考

<div style="height:590px">

    <div class="footer-more-trigger" style="padding:0pxleft:50%top:autoborder:none" data-title="本代码由42资源网

www.42zy.com

自动生成">

        <div class="footer-more-trigger" style="padding:0pxleft:-962pxtop:autoborder:none" data-title="本代码由42资源网

www.42zy.com

自动生成">

            <a href="链接地址" target="_blank">

                <img src="图片地址" width="1920" height="600" border="0" />

            </a>

        </div>

    </div>

</div>

如果需要根据页面布局的需要调整海报内容中的正文的段落之间距离，可以使用以下几种方法：

使用设计软件（如 Photoshop、InDesign 等）中的段落样式设置功能，可以快速修改段落间距。

在 Word 中，可以在“段落”选项卡中找到“段落间距”设置，可以调整段落间距的大小。

在 HTML 中，可以使用 CSS 的 margin 属性来调整段落之间的间距。

注意：在调整段落间距时，要考虑到海报的整体布局和视觉效果，避免段落间距过大或过小，影响海报的阅读体验。

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

**注意： **有部分网友评论img.setAttribute('crossOrigin', 'anonymous') 必须是写 在你赋值 img.src 之前，所以楼主写法有误 可以看看这个链接 去看看, https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror/27260385#27260385

效果图如下:

模糊在线demo

解决方案：

1.首先一样，获取 Canvas 对象：

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

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

注意基础知识点：

要设置canvas的画布大小，使用的是 canvas.width 和 canvas.height；

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

4.绘制

效果图如下

优化后不模糊的在线demo

参考链接：

一个关于image访问图片跨域的问题,https://www.jianshu.com/p/8fa0fb53c183

解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported, https://www.jianshu.com/p/6fe06667b748

解决 canvas 在高清屏中绘制模糊的问题, https://www.html.cn/archives/9297