这篇博客探讨了使用Vue.js和Canvas在Web应用中如何实现图像处理，特别是调节图像的亮度和对比度。作者指出遇到的跨域问题，并提出通过将本地图片上传至服务器来避免该问题。
目前存在一点问题，就是canvas在浏览器上会出现跨域问题，把本地图片上传到服务器，用服务器的图片，就可以解决。
JavaScript版
<div class="div_tool">
颜色：
<label><input name="Color" type="radio" value="0" checked="" onchange="ColorChange()">黑白 </label>
<label><input name="Color" type="radio" value="1" onchange="ColorChange()">彩色 </label>
<div>
<label class="lalbel_1">对比度：</label><input type="range" id="RangeContrast" min="0" max="127"
onchange="ContrastChange()">
<label id="Contrast">67</label>
</div>
<div>
<label class="lalbel_1">亮度：</label><input type="range" id="RangeBrightness" min="128" max="255"
onchange="BrightnessChange()">
<label id="Brightness">168</label>
</div>
</div>
<div class="div_canvas">
<canvas id="mycanvas" width="900px" height="350px"></canvas>
</div>
<div class="div_img">
<img id="oct" src="./test_files/new.png">
</div> <script type="text/javascript">
var colorbar1 = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[8, 8, 7],
[22, 23, 44],
[4, 9, 77],
[0, 15, 114],
[0, 24, 136],
[0, 36, 155],
[0, 46, 170],
[0, 56, 179],
[0, 69, 188],
[0, 87, 192],
[0, 108, 197],
[0, 126, 201],
[0, 146, 205],
[0, 164, 206],
[0, 176, 203],
[0, 190, 198],
[0, 202, 194],
[0, 217, 188],
[0, 220, 175],
[0, 222, 159],
[0, 224, 142],
[0, 227, 127],
[0, 229, 111],
[0, 231, 97],
[0, 233, 79],
[0, 235, 63],
[0, 237, 48],
[0, 240, 32],
[0, 244, 16],
[7, 248, 4],
[18, 251, 0],
[33, 255, 0],
[46, 255, 0],
[59, 255, 0],
[73, 255, 0],
[86, 255, 0],
[100, 255, 0],
[111, 255, 0],
[123, 255, 0],
[136, 255, 0],
[150, 255, 0],
[163, 255, 0],
[177, 255, 0],
[189, 255, 0],
[204, 255, 0],
[214, 255, 0],
[221, 255, 0],
[227, 254, 0],
[233, 254, 0],
[239, 253, 0],
[245, 253, 0],
[251, 253, 0],
[254, 249, 0],
[255, 242, 0],
[255, 234, 0],
[255, 227, 0],
[255, 219, 0],
[255, 213, 0],
[255, 204, 0],
[255, 196, 0],
[255, 189, 0],
[255, 182, 0],
[255, 174, 0],
[255, 165, 0],
[255, 155, 0],
[255, 143, 0],
[255, 132, 0],
[255, 120, 0],
[255, 110, 0],
[255, 105, 0],
[255, 99, 0],
[255, 93, 0],
[255, 87, 0],
[255, 82, 0],
[255, 76, 0],
[255, 70, 0],
[255, 66, 0],
[255, 61, 0],
[255, 55, 0],
[255, 51, 0],
[255, 47, 0],
[255, 42, 0],
[255, 40, 0],
[255, 38, 0],
[255, 36, 0],
[255, 34, 0],
[255, 32, 0],
[255, 31, 0],
[255, 29, 0],
[255, 28, 0],
[255, 25, 0],
[255, 24, 1],
[255, 22, 4],
[255, 20, 8],
[255, 19, 11],
[255, 17, 15],
[255, 25, 25],
[255, 39, 39],
[255, 52, 52],
[255, 66, 66],
[255, 80, 80],
[255, 99, 99],
[255, 120, 120],
[255, 128, 128],
[255, 138, 138],
[255, 150, 150],
[255, 158, 158],
[255, 168, 168],
[255, 177, 177],
[255, 182, 182],
[255, 191, 191],
[255, 198, 198],
[255, 204, 204],
[255, 213, 213],
[255, 219, 219],
[255, 226, 226],
[255, 235, 235],
[255, 237, 237],
[255, 239, 239],
[255, 242, 242],
[255, 243, 243],
[255, 246, 246],
[255, 248, 248],
[255, 250, 250],
[255, 252, 252],
[255, 254, 254],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255],
[255, 255, 255]
];
var colorbar = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[1, 1, 1],
[3, 3, 3],
[4, 4, 4],
[6, 6, 6],
[7, 7, 7],
[9, 9, 9],
[10, 10, 10],
[12, 12, 12],
[13, 13, 13],
[15, 15, 15],
[16, 16, 16],
[18, 18, 18],
[19, 19, 19],
[21, 21, 21],
[22, 22, 22],
[24, 24, 24],
[25, 25, 25],
[27, 27, 27],
[28, 28, 28],
[30, 30, 30],
[31, 31, 31],
[33, 33, 33],
[34, 34, 34],
[36, 36, 36],
[37, 37, 37],
[39, 39, 39],
[40, 40, 40],
[42, 42, 42],
[43, 43, 43],
[45, 45, 45],
[46, 46, 46],
[48, 48, 48],
[49, 49, 49],
[51, 51, 51],
[52, 52, 52],
[54, 54, 54],
[55, 55, 55],
[57, 57, 57],
[58, 58, 58],
[60, 60, 60],
[61, 61, 61],
[63, 63, 63],
[64, 64, 64],
[65, 65, 65],
[67, 67, 67],
[68, 68, 68],
[70, 70, 70],
[71, 71, 71],
[73, 73, 73],
[74, 74, 74],
[76, 76, 76],
[77, 77, 77],
[79, 79, 79],
[80, 80, 80],
[82, 82, 82],
[83, 83, 83],
[85, 85, 85],
[86, 86, 86],
[88, 88, 88],
[89, 89, 89],
[91, 91, 91],
[92, 92, 92],
[94, 94, 94],
[95, 95, 95],
[97, 97, 97],
[98, 98, 98],
[100, 100, 100],
[101, 101, 101],
[103, 103, 103],
[104, 104, 104],
[106, 106, 106],
[107, 107, 107],
[109, 109, 109],
[110, 110, 110],
[112, 112, 112],
[113, 113, 113],
[115, 115, 115],
[116, 116, 116],
[118, 118, 118],
[119, 119, 119],
[121, 121, 121],
[122, 122, 122],
[124, 124, 124],
[125, 125, 125],
[127, 127, 127],
[128, 128, 128],
[129, 129, 129],
[131, 131, 131],
[132, 132, 132],
[134, 134, 134],
[135, 135, 135],
[137, 137, 137],
[138, 138, 138],
[140, 140, 140],
[141, 141, 141],
[143, 143, 143],
[144, 144, 144],
[146, 146, 146],
[147, 147, 147],
[149, 149, 149],
[150, 150, 150],
[152, 152, 152],
[153, 153, 153],
[155, 155, 155],
[156, 156, 156],
[158, 158, 158],
[159, 159, 159],
[161, 161, 161],
[162, 162, 162],
[164, 164, 164],
[165, 165, 165],
[167, 167, 167],
[168, 168, 168],
[170, 170, 170],
[171, 171, 171],
[173, 173, 173],
[174, 174, 174],
[176, 176, 176],
[177, 177, 177],
[179, 179, 179],
[180, 180, 180],
[182, 182, 182],
[183, 183, 183],
[185, 185, 185],
[186, 186, 186],
[188, 188, 188],
[189, 189, 189],
[191, 191, 191],
[192, 192, 192],
[193, 193, 193],
[195, 195, 195],
最低0.47元/天 解锁文章
扫一扫
266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
