【云裳图文】点绛唇：风中胭脂味

欢颜（云裳） 发表于 2025-3-2 23:08

爆汁莓驴 发表于 2025-3-2 23:28

这个像素，电脑直接看都吃力:lol等会试试放大。。。<br>
<canvas style="margin-left:0px" id="myCanvas"></canvas>
<script>
resizeImage(1.175);
function resizeImage(scale){
   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');


   // 加载外链图片
   const img = new Image();
   img.src = 'http://www.yinhuabbs.cn/data/attachment/forum/202503/02/230716laru1iuquaqi1r2e.jpg';
   img.onload = function() {
         // 设置canvas的大小
         canvas.width = img.width * scale; // 放大两倍
         canvas.height = img.height * scale;
         ctx.imageSmoothingQuality = 'high';
         // 绘制放大后的图片
         ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
   };
}
</script><br>
<inputtype="button" value="超屏（1:2.0）" onclick="resizeImage(2.0);myCanvas.style.marginLeft='-250px'"><inputtype="button" value="铺屏（1:1.575）" onclick="resizeImage(1.575);myCanvas.style.marginLeft='-250px'"><inputtype="button" value="原图（1:1）" onclick=" resizeImage(1.0);myCanvas.style.marginLeft='0px'"><inputtype="button" value="正常放大（1:1.175）" onclick=" resizeImage(1.175);myCanvas.style.marginLeft='0px'">
2D相对无损放大。代码放大比不了ai无损放大:L <br>
2D无损放大在标签canvas画布上展示的，有画的概念，所以称“无损”。上面画布是没有设置宽高，相当于大家平时用px设置大小，手机显示大家可以做个比较。触屏版都看不完整，尽管电脑显示好！

欢颜（云裳） 发表于 2025-3-2 23:34

爆汁莓驴发表于 2025-3-2 23:28
这个像素，电脑直接看都吃力等会试试放大。。。

谢谢欣赏，问好

爆汁莓驴 发表于 2025-3-3 04:20

这个我把画布宽度设置成100%，同样上面设置的按钮，再看看手机显示情况<br>

<canvas style="margin-left:0px;width:100%" id="myCanvas2"></canvas>
<script>
resizeImage2(1.175);
function resizeImage2(scale){
   const canvas = document.getElementById('myCanvas2');
   const ctx = canvas.getContext('2d');


   // 加载外链图片
   const img = new Image();
   img.src = 'http://www.yinhuabbs.cn/data/attachment/forum/202503/02/230715zffxj2i0ycfnzugy.jpg';
   img.onload = function() {
         // 设置canvas的大小
         canvas.width = img.width * scale; // 放大两倍
         canvas.height = img.height * scale;
         ctx.imageSmoothingQuality = 'high';
         // 绘制放大后的图片
         ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
   };
}
</script><br>
<inputtype="button" value="超屏（1:2.0）" onclick="resizeImage2(2.0);myCanvas2.style.marginLeft='0px'"><inputtype="button" value="铺屏（1:1.575）" onclick="resizeImage2(1.575);myCanvas2.style.marginLeft='0px'"><inputtype="button" value="原图（1:1）" onclick=" resizeImage2(1.0);myCanvas2.style.marginLeft='0px'"><inputtype="button" value="正常放大（1:1.175）" onclick=" resizeImage2(1.175);myCanvas2.style.marginLeft='0px'">
结果是都框在完整显示的范围内（100%），手机都完整显示。看不清楚，可以两指缩放:lol 在手机设置放大毫无意义，完整性最重要。电脑也看得清楚。

爆汁莓驴 发表于 2025-3-3 04:48

鱼和熊掌如何兼得？<br>
<canvas style="margin-left:0px" id="myCanvas3"></canvas>
<script>
resizeImage3(1.175);
function resizeImage3(scale){
   const canvas = document.getElementById('myCanvas3');
   const ctx = canvas.getContext('2d');


   // 加载外链图片
   const img = new Image();
   img.src = 'http://www.yinhuabbs.cn/data/attachment/forum/202503/02/230715jdgf8sgezf0hgsgp.jpg';
   img.onload = function() {
         // 设置canvas的大小
         canvas.width = img.width * scale; // 放大两倍
         canvas.height = img.height * scale;
         ctx.imageSmoothingQuality = 'high';
         // 绘制放大后的图片
         ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
   };
}

function setWidth() {
var screenWidth = screen.width;
if (screenWidth > 767) {
   myCanvas3.style.width='auto';
} else {

   myCanvas3.style.width='100%';aa1.onclick="myCanvas3.style.marginLeft='0px'";aa2.onclick="myCanvas3.style.marginLeft='0px'";

}
}
window.onload = setWidth;
window.onresize = setWidth;
</script><br>
<input id="aa1" type="button" value="超屏（1:2.0）" onclick="resizeImage3(2.0);myCanvas3.style.marginLeft='-250px'"><input id="aa2"type="button" value="铺屏（1:1.575）" onclick="resizeImage3(1.575);myCanvas3.style.marginLeft='-250px'"><inputtype="button" value="原图（1:1）" onclick=" resizeImage3(1.0);myCanvas3.style.marginLeft='0px'"><inputtype="button" value="正常放大（1:1.175）" onclick=" resizeImage3(1.175);myCanvas3.style.marginLeft='0px'"><br>
可以看看电脑和手机效果。<br>
横贯全屏对音画作品的确有很好的展示效果，我现在也喜欢用了。但前提是不影响手机完整性的展示，现在手机是大爷;P

爆汁莓驴 发表于 2025-3-4 04:42

这个代码有点繁琐，贴图片不用很复杂，用最简单的img标签即可，宽度100%，高度不用设置，电脑和手机都会完整显示，而且最大化。如果铺屏或超屏，用样式的transform属性，一般值为transform: scale(1.0)，如果放大，大于1.几，不要超过2.0，具体看像素，过于放大不清楚。放大超过1.0，需要调整左面的位置，用margin-left可以负值，具体调整以能看见图片左面为准。<img src="图片连接" style="width:100%;margin-left:0;transform:scale(1.0)>"如果放大，电脑可以完整显示，但手机（触屏版）只可显示一部分。不建议使用，浏览器框架最大化100%都可完整显示，手机两指缩放非常便利，电脑再放大超出浏览器和屏幕没有多大意义。制图都很爱惜作品的完美！同样道理，浏览器和论坛版面也需要完整完美。当然如果你设置控制（譬如按钮）来放大，这就是友好显示:lol

么念发表于 2025-3-6 15:33

好看图文制作，欣赏学习精彩制作

欢颜（云裳） 发表于 2025-3-9 16:17

么念发表于 2025-3-6 15:33
好看图文制作，欣赏学习精彩制作

谢谢欣赏和点评，问好

页: [1]

中画网's Archiver

【云裳图文】点绛唇：风中胭脂味