添加到画布的示例:
let item = [];
item.src = "data:image/png;base64,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…Q2lv9gRWZ9lSuK1TCUawQGbRHKkOpYoGk8Pg/Fg6I/ihrFU1xddT/GxGY8e9Nf7gVYpj4UNRZQYGaxBk77z9I1vF0jGMoivd/HKhFJOcldX7voLyHRKlIA2vrHtoCS8Ff9yTZ1LRHfbuy9GxiRJiAlXN7GDhYIOpx0FCEn/Erttukpd9Cg0bZeW8H0bDHDTlOxnP3nF/v7Z5+z146dssdCwfHFOybAAElPCIcSeb7ISkyaoKgUmykwJHm4fGHFD3FnSicNC4ciZ1gXvDEwiuaUSlit5E2ACY5IahaGtQ3y0JhvfA13GxloIbdnptmw27VtutmUPPXC7PfS7d9udd9xihRzJrj3L5wcCJvnCxCajrgR0aAtiTwhR6GQ8lAmgIw+GUgQ2MxY6ck5irwhn6hxAUlJzxwLABLDFsCzlsW2GhFd16PSMmijeluI+LtI61caadTqO9Rxh4moShLhz6REyuo2raTjkoAifFY+Nkl+2RGrR1M0pvQwp5xC8hrfJ2SzEyC4uh8Hy3kuDIXMOt5ezIJRy0KTAjhCdTU+fQc+zb2CP9FVU88RGsiCzgDqLkpR4pElh0fNeINKrAErJbgh2ZdX0Q1otY75Uuro4NosYuN+tR+63uX3vs5x0WwUb9Qf2b9/8B3vsyc8JfETQogVoPLYC0ejjkf3g+efsDz/9GVv+9Ru2duqtd7VIT6VVcsAnYwIlGelC/DrignGtiJdq+D8LO8wIuolUR+LjhnEHIIHJ0++KecW8e0O8ktVrVStXEGrPxIjgwiGZFVsvz0dJhO7K2HTVKM+mttlq2eXLazbs8ZnM7OLamq1eOK/PkJu6iZerSbOJxmLD9uzdrawSASeJu/PGz+PjMn7aW9iDHZhQkgFIAE6kB8mKVdFWqHzD2gWDhjaETXXogWsFQAcaFbqiM578deHoUZkVHYN0V64tRJgvq36YL4UYvggIBhR3R1YowGhWVco5f2FFTpzV1XXbaLEOwALNbHX1svWHU5tv7LV6fclsVrOVc+t24q0zdnplRaXYSqWucjf5Jl31+vHvrwZMYgnbd490Dkdgsl1ycOVxLjmdS2/mzQujG8ZznkIfNRK+xZhQkqVlhbsxWZcjc+IC3QhMKOUpCtyGk56OoKNZ3+o2tXJpZrfdepMdffRhO3z4Lmss1G1jfc1ys7H0StW5iuzGg2HHcoRWCpyyD4FDCuqfI4ZEDTAL+IktT9Kv9HcBnFwDmMT9Wjt3KOVEYKJtJmaIRSuv7nMlMEmBXarlfDdgEnWA2w9/vqBGoKOKVCQVoh07tCdQKZJWJMz7We+HKWOCkirQL3zEqqdntkKdGPUugkQy0NMOWBx/pZAtaiWy4tkoXA1K36BF8Y3CzxmRxnMwkj297iCjMlTc9gU0/sL/FrW6Hmqb6jtSYSjZfUJExsg1Jt7sTy3Bjd4PxEEPZRcej0v28kuvCpgcO37W5goLVqSB36RgAwJOc1UN5usBJnp98XXtACZRY5N9byFSLPwo9BYQleyhPJEW9+TDcB1wFfEcClYb2wgRbmBLnAh0REv+Cu+b5ESACY395sqUXnIS7jGJSta1jz32gD304GE7dOvNlp/1bdBHiNj3xlVFNB8DUdcsmoA76rRVYrlrri3h+TiZDfr9wEDQ8MpTK6nbS41OGB7ABApU9HTYmMr0HfKUWC26FG8DAhO/JsYkxMOHRMsopovW3DhJ4iIXQUpS488wD/p8kuwMH09urfTvBYBmDkwQOXOdASaAEgETrkFgodS3iAkYxKz4CagbYxNV9LT6ilAO8lwFQAlCxEGf3ASP5o+LDgDFg7M8R8UzUyYCOIxfTnuAlYEWW14PAIbNy11EABPXqQRAI8DjkfqTqceWv5cb1zACQL++2fTn63sk+ooUCgONBRZnRXgrCdM/e0oyUR+CJVd6kEpJMe6wCUTAK1uEFvNFd8UAeAEmsG2AGqUbiDMGjPEY/J2nrbJZuxC2rKC0StnZEdZAGAwOX43Ggi3UGypzrq6s2vKpt+3yWlPj+eLKBWu1mpYvVCVgnZ+DmVi0OdoDU9gQTe+MHps/gnzAycLCgtXmiK5vaBwNhn23qefYj4o2Ry5PlRKxzw1ZiRHDcuiR88bXK09HJn+HsYdGwrVY/J1AsSy/dPV2caEWfwIUQ58pdWBPxMJ5y2ndmNrWJp2DexL/l0uERc4ZWGJ9vSV25PjxU3b67EVrrfet3RvZ5mbHipW6Le05YLt27bdSYcHWL3ds+cQZe/PNk7Y56lqNLuwzAGTZ+irpXB2Y+Ij3veKKruphvbweYKL1TyVgQh09gI0mhowvd+Q6iIcFQ+sBS8lc8kARByay6oZsJTl5pU0caxz2JV4dWn/StnmCNGd9u2nPLnv0Yx+1hx68zw4cuMHamxtq+4B7n07RAGN0PDQCZGyLLdbLy1mpSp+wgk05MPNDzYWKYvW9n50nl2nPjXkmyR4X9RsOBpKohBAbsRO6ucbn3YFJ3EMTyUaIa3CmJbJP/txxHG2f+ZHZTtOF02pHMMWEgEB9LrPujxJgwuKUAJPQpTXLmCgtUyet6N0IfnQvxifJq46OMuxHsummfXHSN+hvxP/Eyze+A+ysil1DdZw54aYXIibEbi+1+XNGCsffK5NDWRchr1/AxAteTtVzkh1wYs3ZZntgrdbQXvrJq/bNr79gpy+sWzk/Z6VqQ6Kw/pjTtDes4gpRGhlJZS7aQoAukaqGctk7AZO4yGc/4NDyMAGHJeULeJM+GAhsfXIdhGs+RRzH87NJUWpA/JqE0Kdd8YjQ5/Kw8U9Qmk/7RiUHqhEHwXTYtsZ8zj7+iaN2372320037bOc0btjA+hmhSI6E+8oPIQO1sQmOoDTatXjmMVmwAgAaJwpAYCwSai2qJA0D4hy7ZCnBPL+YjmorKZc4TSo3iQBnASAJ5I1WNncap2mvGYRf7aGqvEXJ1e42PG+MDw+gdK04gSYhNwDWZvlPsMhwZjB3umbBmhDtdPQjh7WgnEFZSlNDa3aQyCcn4bySWInJ1/oZam+KI3R5Eslo6mEip2trqLz3e3jIW80JxwMXGDbVflnktyHkqQDExgVBy+uoRrbOLAukZ1Rzkx+TqLo/69bvc54paOol/sAIQATiQAj+4H2KASb0amVnjOeKVJWGYbTqFwy9Zo2Cer45EfglkGU6BqkqeVLzlx5VkWqxZifW5QgdL6xpOZ3tKWI6xfrAAARASufKeClsUBgVsEuXbpky6eO29nTZzSWL61dlDWYEgb3W9q1z3bv3W8N3GmhJcZwtKV8EYGDQk4NLT1rhNLSolVrNWf+ACFlmnC6s4z5zLrEPKnPL1i1WlWphXnEWEpANfbSCSCVw4EnJcMC4MRB9wKYBxj5ehHEpqG2z0an3A8+AzZhpV5PrdfZsm6na90Omy+HVeYmfWemaslw8sSy/eatk7Zyft1a7b4MDPXGbmvs2m979x6wxsIN1u8O7czp8/bGr47ZqfPndBicziiJVWwak78FZr2haVZjEtfrawGTnWPTd5DsmI39xwJYDUCNxFxvmqdqSQJMGC985sMB62aaNI5RQuuoAti80zXZJOUiUffkmgAOB1YvTm2r37Ravmj3PXiPPfLIA3bo1lvc9AATPRmqbIiIGm3JeNyVjVhjFGcVY7hS0hihdIO9Wv2jFMpGrH/s7huuEp9VBpwkVYmM1GG7fW/7fE5681yjlJO9vtk8qKgx8SiObCknoysJjE1kweN+Fkut8bEdQDkOYE0MwOTFDDAJLheJXwOLkKW2CQOSWyFs7tFKnDAbWTCRypD8BQSkJ+iVdetEYBKBzM6FMP1/BBbZTWUbqxKqZhG1pSWiDGOSfACSCGvj1HsNzAITPfqzWbhxWeCmoAnVpUubtry8Zi/9+N/thW+/aBfbXZsrLFq5sijXTk/3g6bzeHqG8DWBSfhUdrpyUkQb0ef26xF6/ybjBf+NNw/bDkziRJ7h3gjARI4cEm3lj3GZmbpdmZHMrCldLZYV/gYwKUtGjZuob/lx3268ccE+/vhRO3zXb9ue3XXL5bo2HaMBAJhwCvXmVgopG3qCKzZIuXBylDm8GypfAcERcFBjdwcFwASrnJJetGigP9HnKcqVQDao/EDZB4Gt+o8G104EJs7i+XiOQOVqG2zMuInMYJoLE0ZtACap9Trk/fDaiNvnOgaNSQQmEZQA4GNJLZ5QJyNYCXJdOJHzvhEPez8PAZ48HWGp95NbQWnM3Ra+YZO+SYw5pzr0F13r9YbWG47d6QMwoXuyykA0KPSeP2o22Kd5oTekVCR3cKBFcELJx0tMgU1RaXemNExZlnUip1srLMP8NZ0zV7vGbMD0DoklOTllomU3JKpGW+8VwIQTJO4RNcIryqJbrRTkpJHToVoWMGk06h56VqvqPiXakuTR1ow1pbDYcv10uFLjyFBqnswccEh3MZfR17nGqdVs2sWLK9bd6mpjh7EATLZbbbtw/rRO15zTms1N2+q0rVCqWLVCANuSLZIEK+bDYwuGY+ZJ0eYXF8XKDMewI253p0SEDqUYAat62sDAOn2P9oFxj3MNjRXrlEfN4woCkGE5ZnwEYDvoC0xhGeb1Ug7iOQA4AjJcC+mj/Kgkw26mNwo7BXOKbsadzbZtNtsq4fCPsjX24W53ZOdWVu3Nt0/audNrtrHZU55Ttd6wWn3J9u270d63/4Ny85w/e97+67U37Nj//kYb7mhG5/CaTdVd3pmJ6wIm4cAFZ8QNBphbDJ58J2AiMKEgM3foKNyMP1CLdWeyACaUSCmpKthMEgI3BegWgIk/q5eJi5S9YekKU6vkx9btNCXjPXgLItj77M67bre9u5eUZTIedMXoLSzUpLeAMcGxNUNnR25TtZyE600JncSgDHBXDzBEsbEiwDbKOuLJsFcEqYWJmGSRZaUQGf3J9QKTuI7G+Z0Ak1AWT/fkNBxT8CArWg6RD8opSRxD25nouBb+H0rQdn87wTONAAAAAElFTkSuQmCC"
function getThumbail(item) {
function getProporcialHeight(newWidth, oldWidth, oldHeight) {
let tmp = newWidth - oldWidth;
tmp = tmp / (oldWidth / 100);
return (oldHeight + oldHeight * tmp / 100);
}
let canvas = document.createElement('canvas');
canvas.classList.add('img-preview-canvas');
canvas.width = 153.6;
canvas.height = 86.4;
let context = canvas.getContext('2d');
let base_image = `<img src=${item.src} style="max-width: 153.6px;max-height: 86.4px; width: 100%; height: 100%;"/>`;
let el = document.createElement('p');
el.innerHTML = base_image;
base_image = el.firstChild;
context.drawImage(base_image,
canvas.width / 2 - base_image.width / 2,
canvas.height / 2 - base_image.height / 2);
document.body.appendChild(canvas); //picture gets uploaded
console.log(canvas.toDataURL("image/png"));
return canvas.toDataURL("image/png");
}
let dataImg = getThumbail(item);
&#13;
canvas {
border: 1px black dashed;
}
&#13;
图片未添加到画布中。也就是说,它是透明的。不明白为什么..
图像存储在base64中,图像元素被稳定地创建,但由于某种原因它不会被添加到画布中。
P.S。问题不是重复(CanvasContext2D drawImage() issue [onload and CORS]),因为此处图像在添加到画布之前已完全加载。通过console.log检查