【你画我猜】成图上传V2，一键简化操作
本帖最后由 user_login 于 2023-4-29 00:42 编辑增强版 简单便捷
新增内容v2：
[*]图片自适应大小 任意宽高本地图片，上传后自动布局居中。
[*]占用更大的画幅 突破画猜的扁长画幅限制，图片更大更爽！
[*]简化的操作步骤 便捷选取本地图片文件，无需额外预处理~
[*]代码书签秒运行 制作书签栏快捷方式，告别代码与控制台。
追加更新v2.1：
[*]四周增加内边距，小图不挡字、大图更美观
追加更新v2.2：推荐使用！
[*]修复了图像变糊的问题，看起来更清晰了有木有
[*]顺带修复v2.0的模糊
附强迫症最佳尺寸比例：
（固定比例放缩可减少留白区域
1000×694 : v2.0 适用于技术佬设计布局
880×574 : v2.2 预设边距，安心上传
效果怎么样玩画猜的都见过，不多做介绍噜。
使用方法：
[*]制作书签一键，仅首次需要。
[*]点击书签运行代码添加组件。
[*]交互组件选取本地图片即可自动绘制。
详细步骤：
[*]制作一键书签（仅尝鲜的可直接跳到步骤2从控制台输入）
通常情况下浏览器书签用来保存网址便捷访问，这一次我们用它来保存js代码来一键执行。
具体操作是：先建立任意书签(快捷键Ctrl+D)，然后修改其内容(点击'更多...'按钮)。
其中名称一栏任意填写，网址一栏复制以下代码填入。保存完成√
javascript:var padding=30;var par=document.getElementsByClassName("btn");var ct=document.getElementsByClassName("canvas").childNodes;var ctx=ct.getContext("2d");var devicePixelRatio=window.devicePixelRatio||1;var backingStoreRatio=ctx.webkitBackingStorePixelRatio||1;var ratio=devicePixelRatio/backingStoreRatio;ctx.scale(ratio,ratio);padding=padding*ratio;ct.style.borderWidth='1px';ct.style.borderStyle='solid';var img=new Image();img.onload=function(){var sh=347*ratio;var sw=500*ratio;var h=img.height;var w=img.width;var ph=sh-padding*2;var pw=sw-padding*2;ct.height=sh;ct.width=sw;ct.style.height=sh;ct.style.width=sw;ctx.clearRect(0,0,ct.width,ct.height);if(w/h>=pw/ph){h=h*(pw/w);w=pw;ctx.drawImage(img,padding,padding+(ph-h)/2,w,h)}else{w=w*(ph/h);h=ph;ctx.drawImage(img,padding+(pw-w)/2,padding,w,h)}};function selectImage(file){if(!file.files||!file.files){return};var reader=new FileReader();reader.onload=function(evt){img.src=evt.target.result};reader.readAsDataURL(file.files)};var inputObj=document.createElement('input');inputObj.setAttribute('id','imgInput');inputObj.setAttribute('type','file');inputObj.setAttribute('onchange','selectImage(this)');par.appendChild(inputObj);javascript:var padding=30;var par=document.getElementsByClassName("btn");var ct=document.getElementsByClassName("canvas").childNodes;var ctx=ct.getContext("2d");var img=new Image();img.onload=function(){var sh=347;var sw=500;var h=img.height;var w=img.width;var ph=sh-padding*2;var pw=sw-padding*2;ct.height=sh;ct.width=sw;ctx.clearRect(0,0,ct.width,ct.height);if(w/h>=pw/ph){h=h*(pw/w);w=pw;ctx.drawImage(img,padding,padding+(ph-h)/2,w,h)}else{w=w*(ph/h);h=ph;ctx.drawImage(img,padding+(pw-w)/2,padding,w,h)}};function selectImage(file){if(!file.files||!file.files){return};var reader=new FileReader();reader.onload=function(evt){img.src=evt.target.result};reader.readAsDataURL(file.files)};var inputObj=document.createElement('input');inputObj.setAttribute('id','imgInput');inputObj.setAttribute('type','file');inputObj.setAttribute('onchange','selectImage(this)');par.appendChild(inputObj);javascript:var par=document.getElementsByClassName("btn");var ct=document.getElementsByClassName("canvas").childNodes;var ctx=ct.getContext("2d");var devicePixelRatio=window.devicePixelRatio||1;var backingStoreRatio=ctx.webkitBackingStorePixelRatio||1;var ratio=devicePixelRatio/backingStoreRatio;ctx.scale(ratio,ratio);ct.style.borderWidth='1px';ct.style.borderStyle='solid';var img=new Image();img.onload=function(){var h=img.height;var w=img.width;if(w/h>=500/347){h=h*(500/w);w=500}else{w=w*(347/h);h=347}ct.height=h*ratio;ct.width=w*ratio;ct.style.height=h;ct.style.width=w;ctx.drawImage(img,0,0,ct.width,ct.height)};function selectImage(file){if(!file.files||!file.files){return};var reader=new FileReader();reader.onload=function(evt){img.src=evt.target.result};reader.readAsDataURL(file.files)};var inputObj=document.createElement('input');inputObj.setAttribute('id','imgInput');inputObj.setAttribute('type','file');inputObj.setAttribute('onchange','selectImage(this)');par.appendChild(inputObj);
[*]进入画猜的画图界面，在书签栏点击制作的一键。这时候会发现画布下方多了一个文件选择器√
Edge浏览器：需要设置书签栏常驻才能运行。还不行就控制台输入吧。
[*]和出现的组件交互，选择图片后就会自动绘制在画布上√
这种方式的绘图可能会和画猜自带的工具相互冲突覆盖，所以尽量传已经最终处理好的图片。
只有选取的文件有变化时才会触发绘图。
最后补全主题和答案就可以提交啦~❀
有任何错误/问题回帖反馈，会持续更新。
金币++;
血液++;
追随++;
据说有个购买全部附件的神奇选项...
画猜探索 狼狼属实把你画我猜玩的明明白白了 虽然但是，我是坚定的鸡爪画派！ 这黑科技看得我都想去出题了{:4_114:} 楼主这是把你猜我画玩明白了呢。我一直不太懂这个东西。 预感画猜区将迎来空前的繁荣 不错不错，很好很强大 没没没有任何反应{:4_114:} 这是直接干碎现有你画我猜出了全新版本了{:6_194:}
不过作为鸡爪党也还是狂喜，这样就能先用画图软件画完再传了，比用你画我猜自带的工具方便不少XD 打赏已给，快让我啪！ 本帖最后由 withsky 于 2022-11-25 18:48 编辑
大佬！这个图片怎么设置大小呢？选完图片后直接就在画布上了，改不了 太狠了，我一直绞尽脑汁想好画的东西再画半天。 居然不压追随噜 犹记当初的"全属性压10全属性压11，不要追随...不要追随..." 话说这个黑科技直接一把子马住 比上次那个转码好用惹 给你13个赞 首先直接用控制台会报错：Uncaught SyntaxError: Illegal return statement
得把他封装到一个function里面，再运行，好像就可以了。
运行之后，选择图片后，画布没反应这属于正常现象吗？
天哪！我现在越来越相信小狼是超级技术大佬了！太厉害了，猫猫好崇拜~一直都觉得程序员很帅是可以说的吗。另，小狼你猜猫猫的那个画猜是猜对了！！快去领金币！ 釉色大佬真的厉害啊，感觉要去蹲一波简单出题 说得好，我选择帕金森鼠绘增加难度{:6_167:} 甚至有一键功能了，明天次数恢复了研究下 可以的，没想到你还在之前的基础上进行了二次优化，制作了增强版，之前看你一直不需要追随、堕落这些，让我看到你每次发帖都只是多给点血液了，这次看你每一个都可以++，也是第一次都点上了233