Cross domain problem of canvas drawing caused by background image cache

Record a cache from the background image , Shopping guide drawing canvas Cross domain problems encountered in poster .

Problem code ：

var img = new Image()
	img.crossOrigin = 'anonymous' //  To solve the cross domain 
	img.src = ' Picture address '
	img.onload = function () {
    
	  //  Drawing code 
	}

conversant cros Cross domain error reporting

Access to image at 'xxx.xxx.xxxx.png' from origin 'xxx.xxx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If it is a picture stored on your own server , Then go ahead nginx in , Plus the familiar three piece code .

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

But this time the picture is different , It's Tencent COS In storage .

To Tencent cloud COS Configure the cross domain

Go to Tencent cloud first COS In storage , Plus cross domain access , Set to * No. or designated domain name , It is strongly recommended to use the specified domain name , Lazy people like us are lazy to specify domain names , In case the project changes a domain name, you need to come here to configure it again .

After configuration , If you find this broken code, you still report this cross domain error .

use curl Test whether the cross domain configuration is successful .

curl -Lvo /dev/null " Your domain name picture address " -H " Specify the source address "

Test it , notice 200 state , Cross domain setting succeeded .

It's configured here , If there is no cache problem in the following background picture , The cross domain problem has been solved here .

If there is still a cross domain problem , Then you may encounter the same problem as me , Image caching

The solution is to sort out and review ：

The error code is ：Access to image at ‘xxx.xxx.xxxx.png’
The key here is the picture address , I perform curl The test found no such cross domain problem , Then it's definitely not COS The problem of , It must still be JS The problem of end drawing .
Go to code , It was found that img.crossOrigin = 'anonymous’ attribute , In theory, there should be no problem .
A blind toss , The suspicion is this anonymous It didn't work , It is feasible to manually change other pictures without reporting errors , An error will be reported as soon as this picture is used .
There is something wrong with the image .
What can a good picture do ？
Take a look at the debugging tool img request , It is found that this graph is initiated in the cache , Not applied to the added one img.crossOrigin = 'anonymous’ attribute

Why are good pictures cached ？
It was before drawing this picture , This picture address is set as the background picture , When setting the background image for the first time, it is equivalent to the label , Does not cross domain , But the browser caches the loaded background image , When we're in JS Creates one in img object , Set up src Property to load the image , The browser mechanism finds that this image has been cached , But it didn't img.crossOrigin attribute , Here it is judged as cross domain .

The problem is fixed on , The solution is simple ,
Add a timestamp to the back of the picture , There is no cache .

var img = new Image()
	img.crossOrigin = 'anonymous' //  To solve the cross domain 
	img.src = ' Picture address ' +  '?v='+(new Date()).valueOf() //  Do not apply cache 
	img.onload = function () {
    
	  //  Drawing code 
	}

Problem solving , Fix up the work .