How easy is it to defeat a copyrighted image

OK, I may be wasting my time as I know if you can see it in a browser you can copy it.
JavaScripting to block a right-click and copy is very easy to overcome and very frustrating for the end-user who may legitimately want to copy some text from the page.

The following page, https://shared.xara.com/chPPf5WSXN, has an image I have worked on.
It has a copyrighting line of text and a sort or watermark pattern.
You can right-click anywhere but never copy the image.

Now anyone can snip this image but if they used it as there own they would have to remove the copyright else someone might tell on them.

What I am after is what efforts you have to go to remove the notice and the watermark pattern so it seems like an original copy.
You could try mangling the HTML code - try and see where you end up.
I am hoping to see that the effort to rip off an image is time-consuming enough to offer a modicum of protection from theft.

Any resultant uploads should be 1200x760px so I can compare to the original.

I will explain how to make a pattern that could match your site's favicon.

I have been developing a drop-in replacement for existing site images that use Xara's Live Copy. Unfortunately, in doing so I have uncovered a small clutch of issues that scupper that approach; one day, they might be overcome...

Acorn

Seems effective enough. I like the pattern because the viewer can fully evaluate the merits of the picture but it's rendered useless for further use.

Quote:

---

Originally Posted by Boy

Seems effective enough. I like the pattern because the viewer can fully evaluate the merits of the picture but it's rendered useless for further use.

---

Thank you Boy.

I'll talk about the pattern in a bit.

I opened the link in MS Edge as my development browser was replaying the cache.
I set the Zoom to 100% to view at the right scale.
I then right-clicked over the image but could not see the normal Save option - this is part of the design.
So, I then just did a Web Capture > Capture Full Page and copied into my XDA.

I then cropped out the edges that were outside the picture and scaled to 1200px wide.
I managed a depth of 760.5px, close, but lost dpi density getting only 91dpi instead of an expected 96dpi.
I tried Capture Area and managed 1200x760px @ 96dpi.
I therefore had something I could hack.
Anyone could try with any browser and Window's Snip.

I then applied some CSS: <style> #lions { filter: blur(1px); } </style>
I had to increment up to a blur of 2.9px to 'remove' the pattern.
Luckily, the image was rather blurry by this point so it would be hard to pass off as anything other than a rip-off.

I tried cloning and a variety of offset transparencies.
I tried Magic Erase and its Cloning - mostly a mess ensued but it did well with the copyright notice.
Colour erase was no better.
All far too time consuming.
If you had the time, you can pixel paint away almost anything.

Ideas?

Acorn

I am not saying this is practical, but if the star shape outlines could be in some way 'tagged' [simplistically - if they were a very small copyright text] it might be a more rigourous defence if it were ever to come to litigation; but hopefully their very presence would be deterrent enough..

The original, the so-called pos/neg images as uploaded, are easy enough to get to and, in an image editor, apply the same blend mode you use.

I wouldn't waste the time removing the star shapes nor burned-in copyright notice. In fact, the treatment would be enough to forever skip looking at a site treating images in such a manner. Maybe just me.

Quote:

---

Originally Posted by handrawn

I am not saying this is practical, but if the star shape outlines could be in some way 'tagged' [simplistically - if they were a very small copyright text] it might be a more rigourous defence if it were ever to come to litigation; but hopefully their very presence would be deterrent enough..

---

handrawn, anything you can put as Black or White in a box will work:

Attachment 133171

I beleive I have a better solution that this that I will explain presently.

Acorn

Quote:

---

Originally Posted by Acorn

handrawn, anything you can put as Black or White in a box will work:

Attachment 133171

I beleive I have a better solution that this that I will explain presently.

Acorn

---

We probably have to wait till next year before we get to see it.... ;))



(I know, old joke but I couldn't resist it)

Quote:

---

Originally Posted by mwenz

The original, the so-called pos/neg images as uploaded, are easy enough to get to and, in an image editor, apply the same blend mode you use.
I wouldn't waste the time removing the star shapes nor burned-in copyright notice. In fact, the treatment would be enough to forever skip looking at a site treating images in such a manner. Maybe just me.

---

Mike, I want people to get to the 'so-called' Positive & Negative images; that is the point in that I do not care if they do.
Even if you use an exclusion mix-blend-mode as I did, all you will have achieved is the same presentation with the watermark pattern and the copyright notice.
The CSS for this is simply: <style> .mbm-exclusion { mix-blend-mode: exclusion; } </style>, where you add the special Name, htmlclass="mbm-exclusion", to the top-most image.

Attachment 133174 Attachment 133175
There are not many such patterns out there and if you chose a B&W rendering of the site's favicon, even fewer.
A blend still leaves two images unless you are able to combine them in your image editor (flatten layers, I assume).
Many commercial sites watermark their proprietary stock, so why wouldn't a professional photographer or artist?

What I am trying to lead into is a totally flexible approach to improving the security of one's assets.

In working with the Positive & Negative images, my first 'hack' was to make the Black areas transparent.
This removes any coding dependency and allows you to Group and Export as a combined image.
Easy to do in Xara or most image editors.

So far, I have found no clean way to achieve a combined upload that has all of its security markings removed.
I used Krita and a Screen Layer for Positive over the Negative and then Flattened the image.

The copyright notice need not be presented.
The mask can be tuned to blend into the website theme so as not to offend.

Acorn

Quote:

---

Originally Posted by Boy

We probably have to wait till next year before we get to see it.... ;))
(I know, old joke but I couldn't resist it)

---

OK, I'll keep it for a cliff-hanger... ...:-O

Acorn

In making any B&W Mask, you need to be able to copy it and invert the two colours.

Here is one approach that turns a small B&W image into a repeating one for the Masks:

Attachment 133176

It is very quick to scale and rotate the pattern.
Copy and Paste Attributes into the second Mask and flip the colours.
Add a Multiply Transparency to make the White see-through.

Acorn

Yes, I understand all that--and mentioned the hassle it would take to remove your scheme. While I think I could do a reasonable job of it...why?

As for say Getty et al copyrighted images, I don't find them as intrusive. Then too, I only use the copyright image as FPO until the client purchases a license...unless suitable free stock images can be found.

Your scheme is intrusive enough I would pass on perusing such a site. I cannot imagine that is your goal. Such a scheme for copy righted images is off-putting. This is all my POV which may be a POS.

Quote:

---

Originally Posted by mwenz

Yes, I understand all that--and mentioned the hassle it would take to remove your scheme. While I think I could do a reasonable job of it...why?

As for say Getty et al copyrighted images, I don't find them as intrusive. Then too, I only use the copyright image as FPO until the client purchases a license...unless suitable free stock images can be found.
Your scheme is intrusive enough I would pass on perusing such a site. I cannot imagine that is your goal. Such a scheme for copy righted images is off-putting. This is all my POV which may be a POS.

---

The point is a 'reasonable job' and the effort to steal the image may be enough of a deterrent.

The point i was establishing is an XDA has the inherent tools to construct a positive and negative mask from any repeating or non- repeating B&W design.
The result is a complex jigsaw of two interlocking parts that are hard (but not impossible) to re-assemble. It is a watermark and two images.
I was trying to demonstrate the ability to group several shapes in a design into one outputted image.

Attachment 133208

Watermarking on it own is even simpler within a Xara application as you can overlay a transparency onto an image that is itself an image.

For this approach, I see its main limitation to be you that cannot incorporate it into a gallery. It uses a small amount of CSS to achieve the masking.
My next method leverages watermarking and the HighSlide widget.

Acorn

The main problem of Xara's implementation of the HighSlide widget is it take the Shape that has Web Properties > Image > Photo pop-up applied and pop-ups the exact same Shape at a higher scaling.

I have overcome this by placing the pop-up control images into a !Thumbs layer.
They are hidden from design view to avoid clutter. When any shape in the layer calls the same layer as a pop-up then these images & shapes will always be published.

Each !Thumbs' image is then set Web Properties > Image > Photo pop-up as normal.
The only trick is each is then given a Name (Id). I chose tnn where nn can be any two-digit number, just make each different.
The 'thumbs' can be as small as you like. Set them out in a grid (10x10 'thumbs' would work), giving an easy way to recover the Name (Id).

On your design page, any shape, line, button, image or fragment can be linked to this Name.
The Link is javascript: void $('#tnn').parent().click();
This acts as if you had clicked the hidden 'thumbs' image.

In the Page Head and Body are CSS and JavaScript that alter the Xara defaults for HighSlide.
You do not need these but it affords an additional layer of control over how your wish to design to present.

In Xara Plus applications, Xara introduced the preload method that affects how the hs variable can be manipulated.
Essentially, I needed to add a further window.addEventListener('load', ) statement to ensure HighSlide was loaded before accessing and changing the hs variable.
I have not checked with IE (as MS now forces Edge) where there might be a conflict. XDPDv12 runs IE internally but the HighSlide CSS settings are not recognised.
As far as I can see, this design works properly in all modern browsers.

Attachment 133210

I only added a simple watermark to the lions' image.
This approach also works with Variants. You need to ensure the !Thumbs layer in the variant is empty.

Acorn

Developing the last Post, this approach uses the same technique but integrates the HighSliding slicing more seamlessly.

The point of this approach is you are in control of what you want to present and at what scale.
At no time does the entire image get published.
So if you only want actual buyers to get the fuller, genuine article, this is a viable approach.

A rip-off merchant would need to knit together a jigsaw of fragments of differing resolutions with missing pieces.
All before you considering watermarking and masking as covered before.

Attachment 133228

Acorn