js实现上传图片点击试管取色拾色器效果代码
代码语言:html
所属分类:选择器
代码描述:js实现上传图片点击试管取色拾色器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "utf-8"; * { padding: 0; margin: 0; } #wrapper { width: 800px; height: 800px; position: absolute; border: 1px solid #999999; background-color: #fff; } #inputImg, #inputImg_label { width: 100px; height: 40px; border: 4px solid #999999; border-radius: 10px; margin: 10px auto; cursor: pointer; } #inputImg { opacity: 0; position: absolute; left: 50%; margin-left: -54px; top: 0; } #inputImg_label { display: flex; font-size:20px; align-content: center; justify-content: center; } .icon-shangchuan { font-size: 30px; text-align: center; line-height: 40px; cursor: pointer; } .choseImg { position: relative; width: 100%; height: 122px; overflow: hidden; } .colorShow { display: flex; justify-content: center; align-content: center; height: 52px; } .showRGBA, .showRHex { width: 200px; height: 40px; border: 1px solid #999999; margin: 6px 10px; font-size: 14px; line-height: 40px; } .showRGBA > span, .showRHex > span { margin-left: 4px; } </style> </head> <body> <div id="wrapper"> <div class="choseImg"> <label for="inputImg" id="inputImg_label"> <span class="iconfont icon-shangchuan">选择</span> </label> <input type="file" id="inputImg" onChange="uploadImage(this)"> <div class="colorShow"> <div class="showRGBA"> <span>rgba:</span> <span class="rgb"></span> </div> <div class="showRHex"> <span>#16:</span> <span class="sixteen"></span> </div> </div> </div> <canvas class="imgCanvas" width="800" height="680"> </canvas> </div> <script> //截取上传文件的后缀 let suffix = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.bmp$)|(\.*.JPG$)|(\.*.PNG$)|(\.*.JPEG$)|(\.*.BMP$)/; //获取显示图片的画布 let imgCanvas = document.getE.........完整代码请登录后点击上方下载按钮下载查看
网友评论0