How to transform or distort or skew a rectangular image to fit arbitrary quad I have a rectangular image which need to transform so the image fits an arbitrary convex quad. Easy? Except I have an important constraint, the features on the original image must maintain their relative area after the transformation.

I've tried a perspective transformation, but of course feature's relative area's change significantly with perspective.

The (hand-drawn) image below illustrates the effect I need. The original is on the left and the transformed is on the right. Notice that all 4 features maintain same relative area.

I would be happy with solution that maintained the areas approximately.
Assume that the center of the square maps to the center of the vertexes.
The vertices in the output are known. Assume they are $(x_1,y_1),...,(x_4,y_4) $
Their center is $ ( \frac{x_1+x_2+x_3+x_4}{4},\frac{y_1+y_2+y_3+y_4}{4}) $
Now you have 4 degrees of freedom of where to put the points where the color change. 
$ ( w_1 x_1 +(1-w_1) x_2 ,w_1 y_1 +(1-w_1 ) y_2 )  $, and so on





Areas of each of the 4 parts equal to the areas of two triangles (Can be calculated analytically)  
All of these together should give you enough constraints to find $w_1,w_2,w_3,w_4$
Once you found the weights, you can create a grid based mapping that transforms squares into the required forms.